The new jqGrid 3.6 has a jsonReader as Function feature, I couldn’t make it work, possible reason might be my JSON data from WebService doesn’t have ID column at all.
Instead I created an adapter to re-format JSON data to jqGrid specification:
<script type="text/javascript"> var demo_data = "{" + "total: '1'," + "page: '1'," + "records: '5'," + "rows : [" + "{id:'1', cell:['cell11','cell12','cell13']}," + "{id:'2', cell:['cell21','cell22','cell23']}," + "{id:'3', cell:['cell31','cell32','cell33']}," + "{id:'4', cell:['cell41','cell42','cell43']}," + "{id:'5', cell:['cell51','cell52','cell53']}" + "]" + "}"; // demo data GetAllEmailRoles(); function GetAllEmailRoles() { varType = "GET"; varUrl = "http://localhost/restful_service_url"; varContentType = "application/json; charset=utf-8"; varDataType = "json"; varProcessData = false; CallService(); } var varType; var varUrl; var varData; var varContentType; var varDataType; var varProcessData; //Generic function to call AXMX/WCF Service function CallService() { $.ajax({ type: varType, //GET or POST or PUT or DELETE verb url: varUrl, // Location of the service data: varData, //Data sent to server contentType: varContentType, // content type sent to server dataType: varDataType, //Expected data format from server processdata: varProcessData, //True or False success: function(msg) {//On Successfull service call ServiceSucceeded(msg); }, error: ServiceFailed// When Service call fails }); } function ServiceSucceeded(result) {//When service call is sucessful var resultObject = null; if (varDataType == "json") { if (varUrl.indexOf(".asmx/") > 0) { resultObject = result.d; // Constructed object name will be object.d //Button 1 } else if (varType == "GET") { resultObject = result; } } LoadDataIntoGrid(SetupJqgridJson(resultObject)); ResetVars(); } } function ResetVars() { varType = null; varUrl = null; varData = null; varContentType = null; varDataType = null; varProcessData = null; } // resultObject is from ajax success call function SetupJqgridJson(resultObject) { var cells = ""; var total_page = 1; var current_page = 1; var id = 1; for (i = 0; i < resultObject.length; i++) { cells += "\r\n{id:'" + i + "', cell:['" + resultObject[i].Name + "','" + resultObject[i].Active + "','" + resultObject[i].IconName + "','" + resultObject[i].LastModifiedUserId + "','" + resultObject[i].LastModifiedDate + "']}," } var header = "{" + "total: '" + total_page + "'," + "page: '" + current_page + "'," + "records: '" + resultObject.length + "'," + "rows : ["; var footer = "]" + "}"; return header + cells + footer; } function LoadDataIntoGrid(result) { //alert(result); jQuery("#list1").jqGrid({ datatype: "jsonstring", datastr: result, colNames: ['LastModifiedDate', 'LastModifiedUserId', 'Name', 'Active', 'IconName'], colModel: [{ name: 'LastModifiedDate' }, { name: 'LastModifiedUserId' }, { name: 'Name', key: true }, { name: 'Active' }, { name: 'IconName', formatter: dateFormatter }, ], rowNum: 10, rowList: [10, 20, 30], imgpath: gridimgpath, pager: jQuery('#pager1'), viewrecords: true, caption: "XML Example" }).navGrid('#pager1', { edit: false, add: false, del: false }); } dateFormatter = function(el, cellval, opts) { $(el).html(formatDate(cellval)); } function formatDate(vDate) { var d = new Date(parseInt(/\/Date\((\d+).*/.exec(vDate)[1])); return d.toDateString(); } </script>
It’s weird that formatDate() only works in version 3.4, I got uncaught exception: Syntax error, unrecognized expression: /Date(1274811887487-0600)/ error in version 3.6.