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.

`name:'Column 1` & `name:'Column 2` aren't enclosed by `'`, that could cause issues. can you make a demo so it can be tested? — FiLeVeR10, Dec 11 '13 at 15:40
Even stackoverflow internal code highlighter can say, that you missed closing quote here `{name:'Column 1,index:'Column 1', width:240},`; I don't see exact error in question, but you definetely should fix this. — Tommi, Dec 11 '13 at 15:40
I took out the relevant details from my tables and replaced them with generic column names, That is a typo on my behalf I will edit it now. My original code they are properly enclosed. Thanks. — bgh, Dec 11 '13 at 15:56
When are you calling the function to setup the grid? Have you tried using a local obect to hold the data and seeing if the jqGrid will display it? Are you using Firebug to see that the request is going out and getting the returned JSON? — Mark, Dec 12 '13 at 15:13
I am calling the jquery library, jqgrid then my function. The request is working and will post json data but the grid will not populate. — bgh, Dec 12 '13 at 15:58

score 1 · Accepted Answer · answered Aug 23 '14 at 12:05

{ "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.

JqGrid not being initialized

1 Answers1