jqGrid - cant select rows - Cannot call method 'indexOf' of undefined - select

Question

Thanks to Oleg, my jqGrid now looks like this, and works fine. (my problem after the code)
var columnModel = [{ name: 'ID', index: 'ID', sortable: true, summaryType:'count', summaryTpl:'<b>{0} Item(s)</b>' },
{ name: 'FirstName', index: 'FirstName', sortable: true},
{ name: 'LastName', index: 'LastName', sortable: true }
];
var columnNames = ['Id', 'First Name', 'Last Name'];
myGrid.jqGrid({
url: './WebService.asmx/ViewNQueryData',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function (postData) {
if (postData.filters === undefined) postData.filters = null;
return JSON.stringify(postData);
},
jsonReader: {
root: function (obj) { return obj.d.rows; },
page: function (obj) { return obj.d.page; },
total: function (obj) { return obj.d.total; },
records: function (obj) { return obj.d.records; }
},
colModel: columnModel,
colNames: columnNames,
rowNum: 10,
rowList: [10, 20, 300],
sortname: 'ID',
sortorder: "asc",
sortable: true,
pager: "#ViewNQueryPager",
viewrecords: true,
gridview: true,
height: 250,
shrinkToFit: true,
grouping: true,
groupingView: {
groupField: ['ID'],
groupColumnShow: [false],
groupText: ['<b>{0} - {1} Item(s)</b>'],
groupSummary: [true],
groupOrder: ['asc'],
groupDataSorted: true,
showSummaryOnHide: true
},
footerrow: true,
userDataOnFooter: true,
gridComplete: function () {
$('#totalRecordsFound').html(myGrid.jqGrid('getGridParam', 'records') + " Customers");
},
onSelectRow: function () { alert("selected"); }
}).jqGrid('navGrid', '#ViewNQueryPager',
{ edit: false, add: false, del: false, search: true, view: true },//option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{multipleSearch: true, multipleGroup: true, showQuery: true, onSearch: function (response) { showQueryDetails(); } },
{height: 250, jqModal: false, closeOnEscape: true} // view options
);
myGrid.jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true });
For some odd reason i can select any row (evrything else works fine) and i get in the browser this exception:
This happens only in chrome, firefox works fine.
Uncaught TypeError: Cannot call method 'indexOf' of undefined
$.jgrid.extend.setSelection
e.extend.eachjquery-1.6.2.min.js:16
e.fn.e.eachjquery-1.6.2.min.js:16
$.jgrid.extend.setSelection
$.fn.jqGrid
$.fn.jqGrid.each.$.before.click.bind.ts.p.datatype
f.event.handlejquery-1.6.2.min.js:17
f.event.add.i.handle.k
I need some new eyes to please help me and see what i did wrong... this is really driving me crazy..
Thanks in advance.
EDIT
My JSON data is like:
{"d":{"__type":"JqGridData","total":3,"page":1,"records":24,"rows":[{"id":1,"cell":["1","Prabir","Shrestha"]},{"id":2,"cell":["2","Scott","Gu"]},{"id":3,"cell":["3","Scott","Gu"]},{"id":4,"cell":["4","Bill","Gates"]},{"id":5,"cell":["5","Steve","Ballmer"]},{"id":1,"cell":["1","Prabir","Shrestha"]},{"id":2,"cell":["2","Scott","Gu"]},{"id":3,"cell":["3","Scott","Hanselman"]},{"id":4,"cell":["4","Bill","Hanselman"]},{"id":5,"cell":["5","Steve","Ballmer"]}]}}

Answer 1

The reason of your problem is the inconsistent JSON data which you use:
{
"d": {
"__type": "JqGridData",
"total": 3,
"page": 1,
"records": 24,
"rows": [
{"id": 1, "cell": ["1", "Prabir", "Shrestha"]},
{"id": 2, "cell": ["2", "Scott", "Gu"]},
{"id": 3, "cell": ["3", "Scott", "Gu"]},
{"id": 4, "cell": ["4", "Bill", "Gates"]},
{"id": 5, "cell": ["5", "Steve", "Ballmer"]},
{"id": 1, "cell": ["1", "Prabir", "Shrestha"]},
{"id": 2, "cell": ["2", "Scott", "Gu"]},
{"id": 3, "cell": ["3", "Scott", "Hanselman"]},
{"id": 4, "cell": ["4", "Bill", "Hanselman"]},
{"id": 5, "cell": ["5", "Steve", "Ballmer"]}
]
}
}
The id filed will be used as the value of id attribute of rows of the grid (<tr> elements). Corresponds to HTML/XHTML specification ids must be unique on the page.