Loading json data into jqgrid using setGridParam

Question

I'm having some issues setting the url of the jqgrid using setGridParam.

I receive the message: "f is undefined".

My setup:

       $("#prices").jqGrid({
    colModel: [
           ...
        ],
    pager: jQuery('#pricePager'),
    ajaxGridOptions: { contentType: "application/json" },
    mtype: 'POST',
    loadonce: true,
    rowTotal: 100,
    rowNum: -1,
    viewrecords: true,
    caption: "Prices",
    height: 300,
    pgbuttons: false,
    multiselect: true,
    afterInsertRow: function (rowid, rowdata, rowelem) {
        // ...
    },
    beforeSelectRow: function (rowid, e) {
      // ...
    },
    onSelectRow: function (rowid, status) {
       // ...
    }
}); 

Getting the data:

$("#prices").setGridParam({ datatype: 'json', page: 1, url: '@Url.Action("GridDataPrices")', postData: JSON.stringify(selections) });

$("#prices").trigger('reloadGrid');

The Response is non encoded json:

{"total":1,"page":1,"records":100,"rows":[{"id":160602948,"StartDate":"\/Date(1311717600000)\/","Duration":7,"Price":1076.0000,"Code":"code"},{"id":160602950,...}]}

However, I get following message, using firebug:

"f is undefined"

I got this working first using addJSONData, but had to replace it because I want to preserve the local sorting.

Thanks in advance.

Answer 1

After you uploaded the code all will be clear. Your main errors are the follwings:

• you should include datatype: 'local' in the jqGrid. Default value is 'xml'.
• the JSON data have named properties so you have to use jsonReader: { repeatitems: false } (see the documentation for details)
• you use "ArivalCodeWay" in colModel and "ArrivalCodeWay" in the JSON data. So you should fix the name of the corresponding jqGrid column
• to decode the date from the "\/Date(1312840800000)\/" format you should include formatter:'date' in the corresponding column.
• In the same way I find good to include formatter:'int', sorttype:'int' in the 'Duration' column and sorttype:'number', formatter:'number', formatoptions: { decimalPlaces:4, thousandsSeparator: "," } in the 'Price' column.
• if you use JSON.stringify you should include json2.js to be sure that your code will work in all web browsers.

The modified demo (including some other minor changed) you can find here. If you click on "Click me" button the grid contain will be loaded.