Question

Could someone help me please. I am trying to use JQGrid to dynamically render columns and data using json. The columns seem to be appearing but there is no row data.

The following is the JSON that I am returning from my service:

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 29291,
            "cell": [
                "Jim",
                "1",
                "2"
            ]
        }
    ],
    "columns": [
        "Name",
        "30/10/2012",
        "23/10/2012"
    ],
    "columnmodel": [
        {
            "name": "Name",
            "index": "Name",
            "align": "left",
            "width": 25
        },
        {
            "name": "30/10/2012",
            "index": "30/10/2012",
            "align": "left",
            "width": 25
        },
        {
            "name": "23/10/2012",
            "index": "23/10/2012",
            "align": "left",
            "width": 25
        }
    ]
}

and the javascript that I am using is:

$.ajax({
    type: "GET",
    url: "ListData?ID=1",
    datatype: "json",
    success: function(result){
        $("#customgrid").jqGrid({
                datatype: "json",
                colNames: result.columns,
                colModel: result.columnmodel,
                data: result.rows,
                width: 800,
                pager: "#customgridpager",
                viewrecords: true,
                sortable: true,
                gridview: true,
        });
    },
});

Any help would be greatly appreciated.

Answer 1

You need just make some small changes in the code. You need first change the typing error in the $.ajax call: change datatype to dataType. Then you need change datatype: "json" to datatype: "jsonstring" and data: result.rows to datastr: result. The full code which I would suggest you is below:

$.ajax({
    type: "GET",
    url: "NiallGray.json",
    dataType: "json",
    success: function (result) {
        $("#customgrid").jqGrid({
            datatype: "jsonstring",
            colNames: result.columns,
            colModel: result.columnmodel,
            datastr: result,
            width: 800,
            pager: "#customgridpager",
            viewrecords: true,
            sortable: true,
            gridview: true,
            rowNum: 10000,
            height: "auto"
        });
    }
});

The modified version of the demo is here: