Question

I’m hoping to use jqGrid for a current web project that I’m working on. The problem is, I can’t seem to get the JSON data to be displayed by the grid. Here is the grid’s initialization code:

$.fn.loadjqgrid = function(httpposturl){
        $(this).jqGrid({
            url: httpposturl,
            datatype: "json",
            mtype: "GET",
            colNames: ["Video Title", "Description", "Date Taken", "Date Uploaded"],
            colModel: [
               {name:"videoTitle", index:"videoTitle", width:150},
               {name:"videoDescription", index:"videoDescription", width:200},
               {name:"dateTaken", index:"dateTaken", width:150, sortable:true},
               {name:"dateUploaded", index:"dateUploaded", width:150, sortable:true}
            ],
            pager: "#gridpager",
            rowNum: 10,
            viewrecords: true,
            caption: "Video Grid"
        });
    };

The JSON that’s returned by the Java servlet:

[{"dateTaken":"Wed Feb 16 00:00:00 UTC 2011","videoDescription":"This is a test","videoTitle":"Test Video","dateUploaded":""}]

Is there something wrong with how the JSON has been formatted or the way the grid has been initialized? Thanks for the help!

Answer 1

To have advantages of server side data filtering, paging and sorting jqGrid work better with the data which included additional information about the current page (see here). If you can not change the server side which produce the JSON data you can add loadonce:true parameter and then the filtering, paging and sorting of data will be done locally. But first of all jqGrid should be able to read your data.

You can use jsonReader which I suggested here (the way is also documented here):

jsonReader: {
    repeatitems: false,
    root: function (obj) { return obj; },
    page: function (obj) { return 1; },
    total: function (obj) { return 1; },
    records: function (obj) { return obj.length; }
}

The way using functions inside of jsonReader is very flexible and you can read practically any JSON data by jqGrid.

After the modification your grid will display the data: see here.

One small problem stay. jqGrid need have unique id for every grid row. The id will be assigned to every <tr> element. Currently integer ids “1”, “2”, … will be used as ids because no ids are found in your JSON data. If one column of grid could be interpret as the id you can include in jsonReader the corresponding property, for example id:"videoTitle". If your data really have no id and you plan have more as one grid of the page you can receive id conflicts. In the case usage id as a function with different implementation for both grids could fix the problem.