jqGrid renders empty table

Question

I have been trying to render a table using jqGrid 4.1.2, I am able to get the JSON response from server side, but I am getting empty table. Heres my sample JSON data:

{
    "response":{
        "total":2,
        "page":1,
        "rows":[{
                "id":135060,
                "cell":{
                    "id":135060,
                    "name":"12"
                }
            },
            {
                "id":115060,
                "cell":{
                    "id":115060,
                    "name":"12345"
                }
            }
        ]
    },
    "status":"SUCCESS",
    "errors":[]
}

I have added the the jqgrid-locale-en.js file, so that shouldn't be the issue. After spending some time on this I feel it has something to do with JSON format that jqGrid expects, If thats is the issue, can someone please tell me how to configure jqGrid to accept the the above JSON format.

Thanks!

Oleg · Answer 1 · 2011-08-06T08:24:02.287

For the case that the problem are still not solve here is the solution. You should use following jsonReader:

jsonReader : {
    repeatitems : false,
    root: 'response.rows',
    page: 'response.page',
    total: 'response.page',
    records: function (obj) { return obj.response.rows.length; }
}

then the data will be read (see the demo). I suppose that you used incorrect the total property in the JSON data and not set the records property at all.

Moreover you should not set error messages inside of the standard response. The HTTP protocol support status codes. If you have detected an error on the server side the server should set error HTTP code in the HTTP header. In the case the order of data processing in the jqGrid does another way and you should use loadError event to decode the error message and to display the results for the user.

score 0 · Answer 2 · answered Jul 28 '11 at 02:44

By default jqGrid does not expect the data in the cell key to contain name:value pairings. If you want to use name:value pairings then you'll need to look into using the jsonReader option and setting repeatitems to false. also make sure that each key is named exactly the same as the corresponding colModel name.

Hard to tell without more code. You should post all of your code when asking questions like this but try something like this along with whatever other options that you're setting...

$("#id").jqGrid({
    url: "url"
    mtype: "post",
    datatype: "json",
    jsonReader: {
        repeatitems: false,
        root: "response.rows",
        cell: "cell",
        id: "id",
        page: "page",
        total: "total",
        records: "records"
    },  
});

It looks like you're not passing back a records key either which is the total number of rows returned by your server side call

jqGrid renders empty table

2 Answers2

Linked