- Below code is my JQGRID code, am using JsonReader to bind data in grid. Also find the image posted below.
2.My service response is JSON, so am using JSON Reader, if I change to "localReader", data not binding.
jQuery(document).ready(function () {
$("#datagrid").jqGrid({
url: service url,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
type: "GET",
datatype: "json",
colNames:['Id','MID','Status','VendorID','VendorName','InvoiceNo','DocDate','Amount','DocNo','Type','DueDate','ClDoc','Text','UserName','Currency','ConCode','Region','Stat','Process','Comb','Comments'],
colModel:[
{name:'id',index:'id', width:50,sortable:true},
{name:'mid',index:'mid', width:50, sortable:true},
{name:'status',index:'status', width:70, sortable:true},
{name:'vendorid',index:'vendorid', width:90, sortable:false,align:"left"},
{name:'vendorname',index:'vendorname', width:170, sortable:false,align:"left"},
{name:'invoiceno',index:'invoiceno', width:130, sortable:false,align:"left"},
{name:'docdate',index:'docdate', width:100, sortable:false},
{name:'amount',index:'amount', width:80, sortable:false,align:"Right"},
{name:'docno',index:'docno', width:100, sortable:false},
{name:'typee',index:'typee', width:50, sortable:false},
{name:'duedate',index:'duedate', width:100, sortable:false},
{name:'cldoc',index:'cldoc', width:80, sortable:false},
{name:'text',index:'texxt', width:70, sortable:false},
{name:'username',index:'username', width:100, sortable:false},
{name:'currency',index:'currency', width:80, sortable:false},
{name:'concode',index:'concode', width:80, sortable:false},
{name:'region',index:'region', width:70, sortable:false},
{name:'stat',index:'stat', width:60, sortable:false},
{name:'process',index:'process', width:60, sortable:false},
{name:'combination',index:'combination', width:60, sortable:true},
{name:'comments',index:'comments', width:150, height:20, edittype:'textarea', sortable:false, editable: true,
editoptions: {disabled: false, size:50, resizable:true}}
],
jsonReader: {
repeatitems: false, // To Bind the Data in Grid.
id: "id",
root: function (obj) { return obj; }, // To Bind the Data in Grid.
page: function () { return 1; },
total: function () { return 1; },
records: function (obj) { return obj.length; },
subgrid: {
root: "rows",
cell: "cell",
repeatitems: false, // To Bind the Data in SubGrid.
id: "id",
root: function (obj) { return obj; } // To Bind the Data in SubGrid.
}
},
rowNum:20,
rowList:[20,30,40,50],
loadonce: true, // If True, all pages will be loaded, else only 1 page will be displayed.
pager: '#navGrid',
sortable: true,
sortname: 'mid',
viewrecords: true,
showOn: 'button',
multiselect:true, // Enabling Checkbox.
sortorder: 'asc',
//prmNames: {rows: 'max'},
prmNames: {rows: 'max', search: null},
height: 290,
width: 1222,
shrinkToFit: false, // For Horizontal Scrollbar.
toolbar: [true,"bottom"], // For appending Buttons in Toolbar.
rownumbers: true // To display No.of rows.
});
});