Jqgrid not binding data

Question

I am getting Json response from WebService as below

Json returns data perfectly. Data looks like

{"d":"[{\"ID\":2,\"Code\":\"mycode\",\"Name\":\"Myname\",\"PassWord\":\"A\",\"ClientLevel\":0,\"DeptNo\":\"\",\"DeptName\":\"\"},{\"ID\":3,\"Code\":\"mycode\",\"Name\":\"ｌｙ1\",\"PassWord\":\"mypassword\", ....... but not binding my jqgrid.

and i have following Jqgrid Code

jQuery("#list2").jqGrid({
                mtype: 'POST',
                url: "myservice.asmx/GetQueryInfo",                  

                serializeGridData: function (postData) {
                    return JSON.stringify({
                        TableNames: TableName,
                        ColumnList: ColumnNames
                    });
                },

                ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
               jsonReader: {
                        repeatitems: false,
                        root: 'd',                           
                        page: function (obj) { return 1; },
                        total: function (obj) { return 1; },
                        records: function (obj) { return obj.toString().length; }
                    },
                datatype: 'json',
                colNames: ['ID', 'Code', 'Name', 'PassWord', 'ClientLevel', 'DeptNo', 'DeptName'],
                colModel: [
                    { name: "ID", width: 55 },
                    { name: "Code", width: 90 },
                    { name: "Name", width: 100 },
                    { name: "PassWord",  width: 80 },
                    { name: "ClientLevel",  width: 80 },
                    { name: "DeptNo",  width: 80 },
                    { name: "DeptName",  width: 150 }
                ],
                autoencode: true,
                gridview: true,
                rowNum: 10,
                loadonce: true,
                rowList: [10, 20, 30],
                pager: '#pager2',
                sortname: 'ID',
                viewrecords: true,
                sortorder: "ID",
                caption: "JSON Example",
                loadError: function (jqXHR, textStatus, errorThrown) {
                    alert('HTTP status code: ' + jqXHR.status + '\n' +
                          'textStatus: ' + textStatus + '\n' +
                          'errorThrown: ' + errorThrown);
                    alert('HTTP message body (jqXHR.responseText): ' + '\n' + jqXHR.responseText);
                }
            });
            jQuery("#list2").jqGrid('navGrid', '#pager2', { edit: false, add: false, del: false });

score 1 · Accepted Answer · edited May 23 '17 at 11:57

I still think that you use old code on the server side (WebMethod which returns string instead of object) because the value of d property is the string. You can use root in jsonReader as function defined like in the answer. In the case it will works in your case too. So you can use

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

Jqgrid not binding data

1 Answers1

Linked