Apeksha Bhat Apeksha Bhat - 4 months ago 29
jQuery Question

jqGrid generating rows but not displaying any data

I am trying to display an ajax data on the jqGrid, although it generates empty rows, no data is displayed.Any help on this would be appreciated. Click to view copy of my jqGrid -
Here is my code:

HTML:

<table id="list47"></table>
<div id="plist47"></div>


JQuery Code:

var mydata=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
{ "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
{ "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var headerData=["id","Name","PackageCode"];

//As header data is taken from another API I would need it in a separate array like the above.

jQuery("#list47").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 10,
colNames: headerData,
colModel: headerData,
rowList: [10,20,30],
pager: "#plist47",
viewrecords: true,
caption: "json Data grid"
});


I even tried the following, but no progress on this one as well:

var md=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
{ "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
{ "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var he=["id","Name","PackageCode"];

jQuery("#list47").jqGrid({
//data: md,
datatype: "local",
height: 150,
rowNum: 10,
colNames: he,
colModel: he,
rowList: [10,20,30],
pager: "#plist47",
viewrecords: true,
caption: "json data grid"
});
for(var i=0;i<md.length;i++){
jQuery("#list47").addRowData(i+1,md[i]);
}

Answer

The problem is that your colModel is not defined as jqGrid expects it.

Col Model Options

As a solution to your problem I added a colmodel variable to hold the correct colmodel definitions and set the colModel grid option to that variable.

Here is a JsFiddle link to the solution.

var md=[{ "id": "83123a", Name: "Name 1", "PackageCode": "83123a" },
                { "id": "83432a", Name: "Name 3", "PackageCode": "83432a" },
                { "id": "83566a", Name: "Name 2", "PackageCode": "83566a" }]

var he=["id","Name","PackageCode"];

var colmodel= [{name:'id', index:'id', width:55},
              {name:'Name', index:'Name' },
                {name:'PackageCode', index:'PackageCode'}]


jQuery("#list47").jqGrid({
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
});
for(var i=0;i<md.length;i++){
 jQuery("#list47").addRowData(i+1,md[i]);
 }

You can also do and not have the addRowData for loop.

jQuery("#list47").jqGrid({
    data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: colmodel,
    rowList: [10,20,30],
    pager: "#plist47",
    viewrecords: true,
     caption: "json data grid"
});