The use is case i want to handle sorting on the client side and pagination on the server side as the volume of records can be soo large i dont want to load all records at once. currently the ui displays so the json below contains them and also the meta-data . page --current page, total - total pages and records- total number of records.
i checked with the jqgrid i dont see why this is not working.
the ui is not displaying any records when data is set as data:ret and in localReader i specify root as data.
the ui displays record when i specify data as data:ret.data but the pager(pagination next prev display doesnt work).
my json data is like this:
var ret={"data":[{"id":"1","firstName":"John","lastName":"Doe"},
{"id":"2","firstName":"John","lastName":"Burns"},
{"id":"3","firstName":"John","lastName":"Newman"},
{"id":"4","firstName":"Mike","lastName":"Vargas"},
{"id":"5","firstName":"David","lastName":"Taylor"}],
"page":1,"total":3,"records":24}
my jquery is like below:
grid.jqGrid({
datatype: "local",
data: ret,
// root:"oldcontacts",
colNames:['ID', 'First Name','Last Name'],
colModel:[
{name:'id',index:'id', key: true, width:70, sorttype:"int"},
{name:'firstName',index:'firstName', width:90},
{name:'lastName',index:'lastName', width:100}
],
localReader : {
root :"data",
page: "page",
total: "total",
records :"records"
},
search:true,
pager:'#pager',
//jsonReader: {cell:""},
rowNum: 10,
rowList: [5, 10, 20, 50],
loadonce:false,
sortname: 'id',
sortorder: 'asc',
viewrecords: true,
sortable:false,
cmTemplate: {sortable:true},//change to false if want
multiselect:true,
multiboxonly: false,
height: "100%",
caption: "Multiple search with local data",
onSelectAll:function(aRowids,isSelected){
// this is not used in this sample.. as I removed the check all button
var i, count, id;
for (i = 0, count = aRowids.length; i < count; i++) {
id = aRowids[i];
if(isSelected)
{mysel.pushObject(id);}
else
{ mysel.removeObject(id);}
}
that.set('selection',mysel);
},
gridComplete: function(){
},
onSelectRow: function (id,isSelected,e) {
//now lets tell jqgrid not to change to yellow on simple click
Ember.$('#'+id).attr("aria-selected","false");// override default selection
Ember.$('#'+id).removeClass("ui-state-highlight");// override default selection
if (e.ctrlKey){
if (isSelected){
mysel.pushObject(id);
Ember.$('#'+id).css('background','red');
}
else
{
Ember.$('#'+id).css('background','white');
mysel.removeObject(id);
}
that.set('selection',mysel);
}
},
});
