jqGrid colModel and jsonReader with no cell

Question

The following json and jqgrid options give me no data in my grid.

var grid = jQuery("#grid")[0];
grid.addJSONData({ // the json
    total: 1,
    page: 1,
    records: 10,
    items: [
        { ProductID: '1', Name: 'Coke' },
        { ProductID: '2', Name: 'Pepsi' },
        { ProductID: '3', Name: 'L&P' },
        { ProductID: '4', Name: 'A&B' },
        { ProductID: '5', Name: 'All Star' },
        { ProductID: '6', Name: 'Wai' },
        { ProductID: '7', Name: 'cd' },
        { ProductID: '8', Name: 'LV' },
        { ProductID: '9', Name: 'DD' },
        { ProductID: '10', Name: 'aW' }
    ]
});

// jqGrid options
{
    ...
    colNames: ['ProductID', 'Name'],
    colModel: [{ name: 'ProductID', Label: 'Id' },
               { name: 'Name', Label: 'Name'}],
    jsonReader: {
        root: 'items',
        cell: ''
    },
   ...
}

score 0 · Accepted Answer · answered Oct 04 '10 at 19:16

Your data has no id properties. It seems that ProductID play the role of id of your data. So you should use additional key:true option in the definition of the ProductID column or include 'id:ProductID' in the jsonReader.

Moreover the Label property should be written in low case: label. It replace the value from the column header colNames. If you use label property for all columns you not need more define colNames array.

If you want to fill the jqGrid with the local data the most effective way is to use addRowData function. In the case you should use localReader instead of jsonReader. It can be used to add not only a row, but an array of row data. In the case of arrays as data the first parameter should be the name of id property. So your code could look like following:

var myData = [
        { ProductID: '1', Name: 'Coke' },
        { ProductID: '2', Name: 'Pepsi' },
        { ProductID: '3', Name: 'L&P' },
        { ProductID: '4', Name: 'A&B' },
        { ProductID: '5', Name: 'All Star' },
        { ProductID: '6', Name: 'Wai' },
        { ProductID: '7', Name: 'cd' },
        { ProductID: '8', Name: 'LV' },
        { ProductID: '9', Name: 'DD' },
        { ProductID: '10', Name: 'aW' }
    ];
jQuery("#grid").jqGrid ('addRowData', 'ProductID', myData);

If all this will not help, you should include in your question the whole code which can be used to reproduce your problem.

The data is not really local. I just made a local object to troubleshoot. — Travis Heseman, Oct 04 '10 at 19:36
@Travis Heseman: We should divide quick fixing of your problem from optimization. You have to define `key:true` or `id:ProductID` in the `jsonReader` **to make your grid working**. I wrote only that it will be not the optimal code. In one of my first posts on the stackoverflow (see http://stackoverflow.com/questions/2660226/should-one-replace-the-usage-addjsondata-of-jqgrid-to-the-usage-of-setgridparam and http://stackoverflow.com/questions/2675625/setting-the-content-type-of-requests-performed-by-jquery-jqgrid/2678731#2678731) I explain that jqGrid has better ways to load JSON data. — Oleg, Oct 04 '10 at 19:53
@Travis Heseman: If you post more code of your program I could show you how to say `jqGrid` to load the JSON data for you instead of loading the data per `addJSONData`. The http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer could be also interesting for you. — Oleg, Oct 04 '10 at 19:56
Actually just got it working with your suggestion of key:true. — Travis Heseman, Oct 04 '10 at 20:11

jqGrid colModel and jsonReader with no cell

1 Answers1