I’m using jqGrid 4.1.2 in a stand alone grid. I’m seeing an instance where the event handlers are receiving a value of “undefined” as the value for the rowid parameter.
Here’s my initialization code.
$("#truckGrid").jqGrid({
url:'/handlers/TruckerCheckDataHandler.ashx',
datatype: "json",
colNames:['id','All','VIN', 'Plate', 'Make','Model','Year','RFID #','Description'],
colModel: [
{name:'id', index: 'id', hidden:true},
{name:'action',index:'action', width:25},
{name:'vin',index:'vin', width:120},
{name:'plate',index:'plate', width:75},
{name:'make',index:'make', width:80},
{name:'model',index:'model', width:80},
{name:'year',index:'year', width:40},
{name:'rfidNo',index:'rfidNo', width:50},
{name: 'description', index: 'description', width: 100, sortable: false}
],
hidegrid: false,
jsonReader : {
root: 'rows',
repeatitems: false,
id: 'id',
page: 'page',
total: 'total',
records: 'records'
},
nav : {
edittext: "Edit",
edittitle: "Edit",
addtext: "Add Truck",
addtitle: "Add Truck",
deltext: "Delete",
deltitle: "Delete"
},
ondblClickRow: function (rowid, iRow, iCol, e) {
alert(rowid);
},
rowNum:10,
rowList:[10,20,30],
pager: '#truckPager',
sortname: 'vin',
viewrecords: true,
sortorder: "desc"
});
jQuery("#truckGrid").jqGrid('navGrid','#truckPager',{
add: true,
addfunc: function() {
},
del:true,
delfunc: function (rowid) {
alert(rowid);
},
editfunc: function (rowid) {
alert(rowid);
},
edit: true,
clear:false
});
Here is the code that actually adds the truck data to the grid.
var _truckList = null;
function truckData (truckId, vin, make, model, year, country, state, plateNum, description, rfid, truckType) {
return {
id : truckId,
vin : vin,
make : make,
model : model,
year : year,
plateCountry : country,
plateState : state,
plateNumber : plateNum,
description : description,
rfid : rfid,
truckType : truckType,
toJqGridData : function() {
// [{"DATA_ID":"0", "DATA_DN": "national"}, {"DATA_ID":"1", "DATA_DN": "samsung"}]
return [{"id":this.id, 'action': '', 'vin':this.vin,
'plate':this.plateCountry + '-' + this.plateState + '-' +
this.plateNumber, 'make':this.make, 'model':this.model,
'year':this.year,'rfidNo':this.rfid,
'description':this.description}]
}
};
}
function addTruckData() {
var addTruck = true;
var truckVin = $('#truckVin').val();
if (truckVin.length == 0) {
return null;
}
var rowId = -1;
var method = '';
var truck = new truckData (0, truckVin,
$('#truckMake').val(),
$('#truckModel').val(),
$('#truckYear').val(),
$('#country').val(),
$('#state').val(),
$('#truckPlateNumber').val(),
$('#truckDescription').val(),
$('#truckRfidNo').val(),
'OwnerOperator');
if (_truckList != null) {
for (var xx = 0; xx < _truckList.length; xx++ ) {
if (_truckList[xx].vin == truckVin) {
// The vin is already in the list, update it.
rowId = xx + 1;
break;
}
}
}
if (rowId == -1 && _truckList == null) {
_truckList = [ truck ];
rowId = 1;
method = 'addRowData';
}
else if (rowId == -1) {
rowId = _truckList.length + 1;
_truckList.push (truck);
method = 'addRowData';
}
else {
_truckList[rowId - 1] = truck;
method = 'setRowData';
}
var result = $('#truckGrid').jqGrid(method, rowId, truck.toJqGridData());
if (!result) {
alert('Operation failed.');
}
// resetTruckFields(); <- Resets the UI state by setting the text boxes to ''
return truck;
}
When the row is double clicked, the event handler fires but the rowid has a value of “undefined”.
ondblClickRow: function (rowid, iRow, iCol, e) {
alert(rowid);
},
I’m sure I’m doing something wrong here but I have no idea what it is. Any thoughts?
The grid is not connected to the data handler at this time and is not making any calls (as expected). Everything is generated locally in java script.
To add a little more clarity, addTruckData() is called by code attached to a button, like so:
$(document).ready(function () {
$('#doIt').click(function () {
if ($('form').valid()) {
addTruckData();
}
});
});
After much beating of my head against the proverbial wall, I gotten it to work. Here’s the list of differences from the code that does not work with the code that does.