Problem showing jqgrid with dynamic column binding
In my tests your code worked. Nevertheless, because the subject of your question is interesting for many jqGrid users, I deceide to write you some small errors and optimization in your code and JSON data.
The first and the most important problem is with the ids of items. The setting id:"0" inside of jsonReader is wrong. It can be used only if the items of data are array and not objects with named properties (repeatitems:false). Currently as ids of rows will be used integers 1,2,... I strictly recommend you include id information in the items of rootVar of JSON data.
Next problem. The property "title": "03-01-11" is wrong. The "title" property of colModel is boolean, so it should be changed to "title": true. Close problem: the property resizable you use as resizeable which is probably more correct in the English, but it will be ignored by jqGrid.
Now small optimizations:
- You can change from
datatype:'jsonstring', datastr:colDtodatatype: 'local', data: colD.rootVar - Add
gridview: trueparameter. - The setting
url: 'SomeUrl/Getdata', andmtype: 'POST', will be ignored in case ofdatatype:'jsonstring'ordatatype:'local'. So you should just remove the parameters of jqGrid. - Because
jsonmapwill not used in your data model I suggest you to removed it from the JSON data. - It seems to me better to use additional
labelproperty of thecolModel. In the case you will no more needcolNames(columnNamesinside your data).
The original your demo you can see here (I made only the changes of type to `type:"GET" beacuse I have no active server components and saved the JSON as a text file). The same demo after the modifications which I suggested is here.
The main restriction of the way is that all data will be local. So you can use local sorting, filtering and paging, but if you do want have server side sorting, filtering and paging than you have to include more additional code in your jqGrid.
The resulting code which I suggest you is:
$(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);
}
});
});
the corresponding JSON data could be for example 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
}
Comments
-
silpa almost 2 years
I am trying to pass the colModel and columns from struts action. Just like in the question jqGrid and dynamic column binding
I am not sure what I am missing. Please Help. Spent quite some time trying to get it right.
jsp:
<script type="text/javascript"> $(document).ready(function(){ $.ajax( { type: "POST", url: "interFinalTbaAction.action", data: "", dataType: "json", success: function(result){ colD = result.couponStripList; colN = result.columnNames; colM = result.colModelList; jQuery("#dataGrid").jqGrid({ jsonReader : { repeatitems: false, root:"rootVar", cell: "", id: "0" }, url: 'SomeUrl/Getdata', datatype: 'jsonstring', mtype: 'POST', datastr : colD, colNames:colN, colModel :colM, loadComplete: function(data){alert('loaded');}, loadError: function(xhr,status,error){ alert('error'); } }) }, error: function(x, e){ alert(x.readyState + " "+ x.status +" "+ e.msg); } }); }); </script> <h2>Inter Final Prices</h2> <table id="dataGrid"> </table> </html>The JSON that my action retuns is
{ "colModelList": [ { "index": "prceCM", "jsonmap": null, "key": false, "name": "prceCM", "resizeable": true, "search": true, "sortable": false, "title": "03-01-11", "width": 300 }, { "index": "prceCMPlusOne", "jsonmap": null, "key": false, "name": "prceCMPlusOne", "resizeable": true, "search": true, "sortable": false, "title": "04-01-11", "width": 300 }, { "index": "prceCMPlusTwo", "jsonmap": null, "key": false, "name": "prceCMPlusTwo", "resizeable": true, "search": true, "sortable": false, "title": "05-01-11", "width": 300 }, { "index": "prceCMPlusThree", "jsonmap": null, "key": false, "name": "prceCMPlusThree", "resizeable": true, "search": true, "sortable": false, "title": "06-01-11", "width": 300 }, { "index": "coupon", "jsonmap": null, "key": false, "name": "coupon", "resizeable": true, "search": true, "sortable": false, "title": null, "width": 300 } ], "columnNames": [ "prceCM", "prceCMPlusOne", "prceCMPlusTwo", "prceCMPlusThree", "coupon" ], "couponStripList": { "rootVar": [ { "coupon": 5.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "coupon": 5.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "coupon": 6.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "coupon": 6.5, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" }, { "coupon": 7.0, "prceCM": "Not Available", "prceCMPlusOne": "Not Available", "prceCMPlusThree": "Not Available", "prceCMPlusTwo": "Not Available" } ] }, "deliveredDataTimestamp": null, "requestedTimestamp": null }Thanks.
-
silpa about 13 yearsThanks Oleg. Saved my time. Started on jquery and jqgrid a few days ago, still learnig. As for the question, I meant to use lable not title, thanks for the detailed answer.
-
techlead over 12 years@Oleg & @Silpa: My jqgrid definition is the same as yours. My JSON is a little bit different. I'm having a hard time using
jsonmapto mapcellsto each column. Please take a look - stackoverflow.com/questions/8618691/… -
Peter Munnings almost 12 yearsNo ways - it just works. Perfectly. Oleg, you're a genius!! Saved me hours and hours of work. Whew :)
-
Oleg almost 12 years@PeterMunnings: I'm glad that I could help you. You are welcome!
