jqgrid jsonReader configuration

Question

I'm new to jqgrid finally i've setup a grid. Suppose i need to setup jsonReader so that the grid knows where to get my grid-data in the json return. However i got blank cells after trying for days.

Here is my grid:

jQuery("#list48").jqGrid({
            url: 'dbtest.aspx/get_offsite_history2',
            datatype: "json",
            mtype: 'POST',
            ajaxGridOptions: { contentType: "application/json" },
            serializeGridData: function(postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function(obj) { alert(JSON.stringify(obj.d)); return obj.d; },
                repeatitems: false
            },
            height: 'auto',
            rowNum: 30,
            rowList: [10, 20, 30],
            colNames: ['name', 'start_date', 'duration', 'offsite_cat'],
            colModel: [
                          { name: 'name', index: 'name', width: 80, align: 'left', editable: true, edittype: 'text' },
                          { name: 'start_date', index: 'start_date', width: 120, align: 'left', editable: true, edittype: 'text' },
                          { name: 'duration', index: 'duration', width: 120, align: 'left', editable: true, edittype: 'text' },
                          { name: 'offsite_cat', index: 'offsite_cat', width: 120, align: 'left', editable: true, edittype: 'text'}],
            pager: "#plist48",
            viewrecords: true,
            sortname: 'name',
            caption: "Grouping Array Data",
            gridview: true
        });

This is the server return from url dbtest.aspx/get_offsite_history2:

{"d":"[{\"name\":\"A\",\"start_date\":\"B\",\"duration\":\"C\",\"offsite_cat\":\"D\"}]"}

i suppose to get the result by setting "root: 'd'" but i got 64 blank rows for that...

look for comments... many thanks

Answer 1

I think the problem is the structure of your returned json data.

Below is one that I use :

{   "page":1,
    "rows":[{"id":"1","cell":["1","1","Row 1","3","9",""]},
            {"id":"2","cell":["2","2","Row 2","2","1",""]},
            {"id":"3","cell":["3","4","Row 3","2","0",""]}],
    "records":3,
    "total":1
}

You may need to add a colModel for id to uniquely identify each row.

e.g.

      colNames: ['id', 'name', 'start_date', 'duration', 'offsite_cat'],
        colModel: [
                      { name: 'id', index: 'id', hidden: true },
                      { name: 'name', index: 'name', width: 80, align: 'left', editable: true, edittype: 'text' },
                      { name: 'start_date', index: 'start_date', width: 120, align: 'left', editable: true, edittype: 'text' },
                      { name: 'duration', index: 'duration', width: 120, align: 'left', editable: true, edittype: 'text' },
                      { name: 'offsite_cat', index: 'offsite_cat', width: 120, align: 'left', editable: true, edittype: 'text'}],

Hope that helps.

Answer 2

The reason of your problem is the bug in your server code. You make serialization to JSON twice. After deserializing of d property of the server response you get still JSON string (!!!) instead of object. Typical error is manual usage of JavaScriptSerializer.Serialize in the web method. One should return the object itself instead of the string which is the result of serializing.

Without modifying of your current server code you can fix the problem by usage of

jsonReader: {
    root: function (obj) {
        alert(typeof obj.d === "string" ? obj.d : JSON.stringify(obj.d));
        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
    },
    repeatitems: false,
    page: function () { return 1; },
    total: function () { return 1; },
    records: function (obj) {
        return typeof obj.d === "string" ? $.parseJSON(obj.d).length : obj.length;
    }
}

or (if you use loadonce: true) just

jsonReader: {
    root: function (obj) {
        return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
    },
    repeatitems: false
}

Because your current server code seems not implemented the paging of data you should increase rowNum to some large enough value like rowNum: 10000 or to use loadonce: true.

UPDATED: You can find here modified demo which works. It displays

after the alert message.