Question

My jqGrid is coming empty with JSON call. Though it is working with datatype=’jsonstring’ but not with json type. here is my JSON

{
    "d": {
        "total": 6,
        "page": 1,
        "records": 6,
        "rows": [
            {
                "id": 1,
                "Name": "James",
                "EMPID": "0000000056",
                "EMPDATE": "",
                "JOBTYPE": "REQ",
                "DEPTID": "FIN",
                "STATUS": "P1"
            },
            {
                "id": 2,
                "Name": "James",
                "EMPID": "R2",
                "EMPDATE": "",
                "JOBTYPE": "REQ",
                "DEPTID": "FIN",
                "STATUS": "P1"
            },
            {
                "id": 3,
                "Name": "James",
                "EMPID": "V2",
                "EMPDATE": "",
                "JOBTYPE": "VOU",
                "DEPTID": "FIN",
                "STATUS": ""
            },
            {
                "id": 4,
                "Name": "James",
                "EMPID": "V1",
                "EMPDATE": "",
                "JOBTYPE": "VOU",
                "DEPTID": "FIN",
                "STATUS": ""
            },
            {
                "id": 5,
                "Name": "James",
                "EMPID": "009017",
                "EMPDATE": "",
                "JOBTYPE": "PY",
                "DEPTID": "",
                "STATUS": "V2"
            },
            {
                "id": 6,
                "Name": "James",
                "EMPID": "009018",
                "EMPDATE": "",
                "JOBTYPE": "PY",
                "DEPTID": "",
                "STATUS": "V1"
            }
        ]
    }
}

and my jqGrid call from javascript is

function getgrid()
    {

    $("#list").jqGrid({
     url:'http://10.240.26.41/GetGridFields',
    datatype: 'json',
    mtype: 'GET',
    ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
    //serializeGridData: function (postData) {
    //    return JSON.stringify(postData);
    //     },
    jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total",   records: "d.records" },
    colModel: [
        { name: 'id', key: true, width: 60, align: "center", hidden: false },
        { name: 'Name', width: 80, sortable: false, hidden: false },
        { name: 'EMPID', width: 180, sortable: false, hidden: false },
        { name: 'EMPDATE', width: 180, sortable: false, hidden: false },

        { name: 'JOBTYPE', width: 180, sortable: false, hidden: false },
        { name: 'DEPTID', width: 180, sortable: false, hidden: false },
        { name: 'STATUS', width: 180, sortable: false, hidden: false }
    ],
    rowNum: 10,
    rowList: [10, 20, 300],
    pager: "#pager",
    viewrecords: true,
    gridview: true,
    rownumbers: true,
    height: 230,
    caption: 'Emp Detail'
    })

    }

Please let me know where i am wrong here. It is working fine with jsonstring.

Answer 1

How you can see on the demo your jqGrid can read your JSON data. I made in the demo only minimal optimization changes which don’t important for your main problem.

So I suppose, that you have either the problem with the usage of full URL (you should use '/GetGridFields' instead of 'http://10.240.26.41/GetGridFields') because you can’t get Ajax call to another IP host because of the same origin policy. One other possible reason is that you have wrong 'Content-Type' or some other HTTP header. You can examine the HTTP headers with respect of Fiddler, Firebug or just with Developer Tools of IE or Chrome (see “Network” tab).

In any way I would recommend you to include loadError handler to jqGrid. See the answer for details.