Problem showing jqgrid with dynamic column binding

Question

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.

Answer 1

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:

1. You can change from datatype:'jsonstring', datastr:colD to datatype: 'local', data: colD.rootVar
2. Add gridview: true parameter.
3. The setting url: 'SomeUrl/Getdata', and mtype: 'POST', will be ignored in case of datatype:'jsonstring' or datatype:'local'. So you should just remove the parameters of jqGrid.
4. Because jsonmap will not used in your data model I suggest you to removed it from the JSON data.
5. It seems to me better to use additional label property of the colModel. In the case you will no more need colNames (columnNames inside 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
}