JqGrid not being initialized

Question

I am trying to use jqGrid to present data in a easy to read manner for analysis, however I am running into an error where I can either have the Json displayed or the grid but not both. I have tried various solutions to my issue but none seem to work. I have checked examples and demos and my code seems to be of a similar ilk, the returned json string is valid and has been checked via http://jsonlint.com/.

$(function () {
$("#grid").jqGrid ({
    url: "my_Url",
    datatype: 'json',
    mtype: "GET",
    colNames:["Column 1", "Column 2","Column 3", "Column 4", "Column 5", "Column 6"],
    colModel: [
               {name:'Column 1', index:'Column 1', width:240},
               {name:'Column 2', index:'Column 2', width:150},
               {name:'Column 3', index:'Column 3', width:150},
               {name:'Column 4', index:'Column 4', width:150},
               {name:'Column 5', index:'Column 5', width:150},
               {name:'Column 6', index:'Column 6', width:150},
              ],
    rowNum:10,
    rowList: [10, 20],
    pager: '#pagination',
    width: 1020,
    sortname:'Column 1',
    viewrecords: true,
    shrinkToFit: false,
    jsonReader : {
        page:"page",
        total:"total",
        records: "records",
        root:"rows",
        cell:"cell",
        id:"id"
    },
    caption: "my title",
});
});

$("#grid").jqGrid('setGroupHeaders', {
useColSpanStyle: true,
groupHeaders: [
               {startColumnName:'Column 2', numberofColumns:7, titleText:'Column 2'},
               {startColumnName:'Column 3', numberofColumns: 10, titleText:'Column 3'},
               {startColumnName:'Column 4', numberofColumns: 7, titleText:'Column 4'},
               {startColumnName:'Column 5', numberofColumns: 7, titleText:'Column 5' },
               {startColumnName:'Column 6', numberofColumns: 10, titleText:'Column 6'},
],
});

A Sample of my returned json:

{
"page": 1,
"total": 1,
"records": 309,
"rows": [
    {
        "id": "112",
        "cell": [
            "<a href=\"url\"> title</a>",
            "3",
            "3",
            "6",
            "4",
            "1"
        ]
    },
}

Any help on this would be greatly appreciated.

Answer 1

{ "page": 1, "total": 1, "records": 309, "rows": [ { "id": "112", "cell": [ " title", "3", "3", "6", "4", "1" ] }, ] }

json data format is not correct. Your missed a right square bracket for rows.