jqGrid colModel and jsonReader with no cell

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

var grid = jQuery("#grid")[0];
grid.addJSONData({ // the开发者_如何学JAVA 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: ''
    },
   ...
}

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.