Rowselect does not fire in virtual mode?

[grandehombreParticipant]

I am having problems with the ‘rowselect’ event in jqxGrid.
Before I switched to server-side paging and virtual mode, it worked ok.

Now, the event does not even fire.

I must be doing something wrong but I just can’t see it.

var source =
{
datatype: “json”
,type: “POST”
,dataFields: [
{ name: ‘id’, type: ‘integer’ }
,{ name: ‘firstName’, type: ‘string’ }
,{ name: ‘surname’, type: ‘string’ }
]
, url: ‘Contact.php’
, root: ‘Rows’
, id: ‘id’
, cache: false
, beforeprocessing: function(data) {
source.totalrecords = data.TotalRows;
}
};
var dataAdapter = new $.jqx.dataAdapter(source
,{
formatData: function (data) {
var criteria = getCriteria();
criteria.ajaxCmd = ‘loadGrid’;
$.extend(data, criteria);
return data;
}
});

var settings = {
source: dataAdapter
,width: ‘100%’
,columnsresize: true
,altrows: true
,autosavestate: true
//,filterable: true
,sortable: true
,pageable: true
,virtualmode: true
,autoheight: true
,rendergridrows: function(obj)
{
return obj.data;
}
,columns: [
{text: ‘id’, datafield: ‘id’, width: 55}
,{text: ‘Name’, datafield: ‘firstName’, width: 225}
,{text: ‘Surname’, datafield: ‘surname’, width: 240}
]
};

$(dataTable).jqxGrid(settings);
$(dataTable)
.on(‘rowselect’, function (event) {
var args = event.args;
//var row = args.rowindex;
var uid = args.row.uid;
$(dataTable).removeData(‘linkedDataIDs’);
showRecord(uid);
})
.on(‘columnresized’, function(event) {
var args = event.args;var column = args.column;
var newwidth = args.newwidth;
var oldwidth = args.oldwidth;
var datafield = args.datafield;
console.log(‘Column ‘, datafield, newwidth);
});

The data comes back from the server in this format

// PHP
$res = array(‘TotalRows’ => $numOfRows, ‘Rows’ => $contactData);
`

[adminKeymaster]

Hi grandehombre,

“rowselect” works on our side. Working demo: http://jsfiddle.net/jqwidgets/82Crt/ I suggest you to check your code for syntax errors as well.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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 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]

[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'}
		]
	 });

[deepaksainiParticipant]

unable to get selection automatically

$(‘#jqxgrid_dropdown’).on(‘rowselect’, function (event) {
var row = $(“#jqxgrid_dropdown”).jqxGrid(‘getrowdata’, event.args.rowindex);
alert(“inside grid” + row[‘ResidentCode’]); //unable to get value of the row variable
var dropDownContent = ‘<div style=”position: relative; margin-left: 3px; margin-top: 5px;”>’ + row[‘ResidentCode’] + ‘</div>’;
$(‘#TxtResidentCode_Lbl’).val(row[‘ResidentName’])
$(‘#TxtResidentCode_Hidden’).val(row[‘ResidentCode’])
$(“#TxtResidentCode”).jqxDropDownButton(‘setContent’, dropDownContent);
});

$(“#jqxgrid_dropdown”).jqxGrid(‘selectrow’, 0);

[Author]

Posts