[grandehombreParticipant]

[admin, please delete this thread.]

I have changed the sequence that I use to place the grid in edit/viewOnly mode (whereby the grid becomes editable if the screen is in add/edit mode and some columns of the grid become editable depending on contents of other columns).

It now works and I don’t know why.

I don’t want to create confusion or take up the developers’ time, so please delete this entire thread.

Cheers,
Nick

[grandehombreParticipant]

[SOLVED]

Changing the property name from dataFields to datafields was all it took to fix the problem.
Oddly enough, everything else worked ok! The field were being shown, the correct number of records was being shown etc

$(document).ready(function() {
	var adapter = new $.jqx.dataAdapter({
		 datatype: "array"
		, localdata: [
			  {id: 1, firstName: 'bob'}
			 ,{id: 2, firstName: 'fred'}
		 ]
===>>>>>>>    ,datafields: [
			{name: 'id', type: 'integer'}
		   ,{name: 'firstName', type: 'string'}
		]
	 });

[grandehombreParticipant]

I have reduced the code to this, trying to emulate what the sample does.
Alas, no ‘rowselect’ event fires.

The grid shows up correctly and it allows me to select rows.

$(document).ready(function() {
	var adapter = new $.jqx.dataAdapter({
		 datatype: "array"
		, localdata: [
			  {id: 1, firstName: 'bob'}
			 ,{id: 2, firstName: 'fred'}
		 ]
		,dataFields: [
			{name: 'id', type: 'integer'}
		   ,{name: 'firstName', type: 'string'}
		]
	 });

	$('#mainDataTable').jqxGrid({
		 width: '600px'
		,source: adapter
		,columns: [
			 {text: 'id',   datafield: 'id', width: 55}
			,{text: 'Name', datafield: 'firstName', width: 225}
		]
	});

	$('#mainDataTable').on('rowselect', function (event) {
     alert("Row with bound index: " + event.args.rowindex + " has been selected");
 });
});

[grandehombreParticipant]

Thanks for the quick reply!!!
I am now modifying my code to use local data, like your example, so I can compare the two.
I will update this msg with my findings.

Cheers,
Nick

[grandehombreParticipant]

I use the following and it works ok.

I have 2 columns (CurrentTotal and TargetFunds) that I want to show the ratio of as a progress bar in a third column.

In the grid’s ‘columns’ definition, specify the following

	var columns = [
	,{text: 'Target funds', datafield: 'targetFunds', cellsformat: 'c', cellclassname: 'thTargetFunds'}
	,{text: 'Current total', datafield: 'currentTotal', cellsformat: 'c', cellclassname: 'thCurrentTotal'}
	,{text: 'Progress'
		,cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties, data) {
			var cell = '<div class="thProgress"></div>';
			return cell;
		}
	}
	];

	// a few lines later. Note 'dataTable'. This is the selector that is also used further down
	$(dataTable).jqxGrid(settings);

The important things above are that the TargetFunds, CurrentTotal and Progress columns, each have a CSS class assigned to them. This will be used later on to locate those columns in the grid.
The customer cell renderer is also important!

Later on, after the grid has been populated with data, do the following

	// look for all the rows containing our 'progress bar' cell
	$('.thProgress', dataTable).each(function() {
		// we are at the 'cell' level, need to move up to the 'row' level
		var row = $(this).parent().parent();

		// now we can just search for the relevant 'column'
		var curValue = Globalize.parseFloat($('.thCurrentTotal', row).text());
		var maxValue = Globalize.parseFloat($('.thTargetFunds', row).text());
		if (curValue > maxValue) {
			curValue = maxValue;
		}

		var pct = (curValue / maxValue) * 100;
		console.debug(curValue, maxValue, pct);

		// This creates a progress bar inside the cell of the current row
		$(this).jqxProgressBar({max: 100, value: pct, showText: true});
	})

Globalize is a library I use that makes parsing of text easy. It is not important here.

I hope this helps.

It would be great if jqWidgets had something like this built into the grid 🙂

[Author]

Posts