In my tests, your code worked. However, since the subject of your question is interesting to many jqGrid users, I’m cheating to write you small errors and optimizations in your code and JSON data.
The first and most important issue is with item identifiers. Setting id:"0" inside jsonReader is incorrect. It can be used only if the data elements are an array, and not objects with named properties ( repeatitems:false ). Currently, integers 1,2, ... will be used as line identifiers. I strongly recommend that you include the identification information in the rootVar elements of the rootVar data.
The next problem. The property "title": "03-01-11" is "title": "03-01-11" . The "title" colModel is logical, so it should be changed to "title": true . Closed issue: the resizable property resizable used as resizeable , which is probably more correct in English, but jqGrid will be ignored.
Now a little optimization:
- You can go from
datatype:'jsonstring', datastr:colD to datatype: 'local', data: colD.rootVar - Add
gridview: true parameter gridview: true . - The
url: 'SomeUrl/Getdata' and mtype: 'POST' settings will be ignored in case of datatype:'jsonstring' or datatype:'local' . Therefore, you should simply remove the jqGrid parameters. - Since
jsonmap will not be used in your data model, I suggest you remove it from JSON data. - It seems to me better to use the optional
label property for colModel . In case you no longer need colNames ( columnNames inside your data).
You can see the original of your demonstration here (I only made type changes for type: type: "GET" beacuse I have no active server components and saved JSON as a text file). The same demonstration after the modifications I proposed here .
The main limitation of the method is that all data will be local . Thus, you can use local sorting, filtering and swapping, but if you need server-side sorting, filtering and swapping, you must include additional code in your jqGrid.
The resulting code that I offer you is as follows:
$(document).ready(function () { $.ajax({ type: "GET", url: "DynamicColumnBinding1.txt", dataType: "json", success: function(result){ var colD = result.couponStripList, colM = result.colModelList; $("#dataGrid").jqGrid({ datatype: 'local', data: colD.rootVar, gridview: true, colModel :colM, height: "auto", loadComplete: function(data){ alert('loaded'); }, loadError: function(xhr,status,error){ alert('error'); } }); }, error: function(x, e){ alert(x.readyState + " "+ x.status +" "+ e.msg); } }); });
corresponding JSON data may be, for example, the following
{ "colModelList": [ { "index": "prceCM", "label": "CM", "name": "prceCM", "width": 100 }, { "index": "prceCMPlusOne", "label": "CM + 1", "name": "prceCMPlusOne", "width": 100 }, { "index": "prceCMPlusTwo", "label": "CM + 2", "name": "prceCMPlusTwo", "width": 100 }, { "index": "prceCMPlusThree", "label": "CM + 3", "name": "prceCMPlusThree", "width": 100 }, { "index": "coupon", "label": "Coupon", "name": "coupon", "align": "right", "sorttype": "number", "formatter": "number", "formatoptions": { "thousandsSeparator": "," }, "width": 100 } ], "columnNames": [ "prceCM", "prceCMPlusOne", "prceCMPlusTwo", "prceCMPlusThree", "coupon" ], "couponStripList": { "rootVar": [ { "id": 71, "coupon": 5.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 72, "coupon": 5.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 73, "coupon": 6.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 74, "coupon": 6.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "id": 75, "coupon": 7.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" } ] }, "deliveredDataTimestamp": null, "requestedTimestamp": null }