jqGrid generating rows but not displaying any data

Question

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]);
 }

Helen Araya · Answer 1 · 2016-07-11T21:14:42.330

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"
});

+1 for correct pointing the reason of the problem - the value of `colModel`. I still recommend *never fill the grid in the loop by calling `addRowData`. It's the worst way of filling the grid. Instead of that one should just use `data: md` and add `gridview: true` option. See https://jsfiddle.net/adgptkvj/265/ — Oleg, Jul 11 '16 at 21:11
@Oleg thanks thats why I pointed that at the end of my answer. — Helen Araya, Jul 11 '16 at 21:15

score 0 · Accepted Answer · answered Jul 11 '16 at 21:58

Thank you! That idea worked for me. I just had to parse my data accordingly into the colModel like this:

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 c=[];

for(var i=0;i<he.length;i++){

  c.push('{"name":"'+he[i]+'","index":"'+he[i]+'"}');
}
var colmodel="["+c+"]"

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

  // c.push('{"name":"'+he[i]+'","index":"'+he[i]+'"'+'"formatter":'+formatTitle+'}');                  
jQuery("#list47").jqGrid({
    //data: md,
    datatype: "local",
    height: 150,
    rowNum: 10,
    colNames: he,
    colModel: jQuery.parseJSON(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]);
 }

how you parse the colModel is not an issue in the question hence you should not accept yours as answer. — Helen Araya, Jul 14 '16 at 14:21

jqGrid generating rows but not displaying any data

2 Answers2