jQuery loading data into jqGrid

Question

I'm a first time user of jqGrid, so far I went trough official examples, I'm interested in loading data into grid either using json.

I'm currently looking at, Loading data(JSON Data): http://trirand.com/blog/jqgrid/jqgrid.html

Here is a bit of javascript that creates grid :

jQuery("#list2").jqGrid(
    {
        url : '<c:url value="${webappRoot}/getdetails" />',
        datatype : "json",
        colNames : [ 'id', 'Location', 'Country Code', 'Type', 'Interval',
                     'Version', 'Last Active', 'Last Login', 'NOTE' ],
        colModel : [
            { name : 'id', width : 10 },
            { name : 'location', width : 75 },
            { name : 'countryCode', width : 50 },
            { name : 'type', width : 40 },
            { name : 'interval', width : 30 },
            { name : 'version', width : 45 },
            { name : 'lastactive', width : 50, align : "right" },
            { name : 'lastlogin', width : 50, sortable : false },
            { name : 'note', width : 50, sortable : false}
        ],
        rowNum : 10,
        rowList : [ 10, 20, 30 ],
        pager : '#pager2',
        width: gridWidth,
        sortname : 'id',
        viewrecords : true,
        sortorder : "desc",
        caption : "JSON Example"
});
jQuery("#list2").jqGrid('navGrid', '#pager2',
                        { edit : false, add : false, del : false});

${webappRoot}/getdetails transforms path to my project like http://localhost/myProject/getdetails, I'm using spring MVC(it might be irrelevant).

When I look in firebug this generates this http request :

GET http://localhost/newProject/getdetails?_search=false&nd=1304638787511&rows=10&page=1&sidx=id&sord=desc  
200 OK
135ms

Here is the response :

{
    "id": 1,
    "location": "office_2782",
    "countryCode": "UK",
    "quarter": "500",
    "version": "v3.05",
    "lastactive": "yesterday",
    "lastlogin": "today",
    "note": "no note",
    "type": "read-only"
}

When I navigate to JSON tab it all seems same as this, any idea what I'm doing wrong?

I'm trying to load only one record for start, and I can't get it working, any help is appriciated.

Answer 1

First of all you are not the first person who has problems understanding how the JSON data should be constructed, what the parameters sent from jqGrid to the server mean and so on. The official jqGrid documentation doesn't contain enough introduction, so the first steps of the jqGrid usage can be a little more difficult than one expect.

The problem which exists in your JSON response from the server is that it contains only one item of data instead of an array (or list) of items representing the grid rows. The data should be at least

[
    {
        "id": 1,
        "location": "office_2782",
        "countryCode": "UK",
        "quarter": "500",
        "version": "v3.05",
        "lastactive": "yesterday",
        "lastlogin": "today",
        "note": "no note",
        "type": "read-only"
    }
]

or better as

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 1,
            "location": "office_2782",
            "countryCode": "UK",
            "quarter": 500,
            "version": "v3.05",
            "lastactive": "yesterday",
            "lastlogin": "today",
            "note": "no note",
            "type": "read-only" 
        } 
    ]
}

or even as

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        {
            "id": 1,
            "row": [ "1", "office_2782", "UK", "500", "v3.05",
                     "yesterday", "today", "no note", "read-only" ] 
        } 
    ]
}

or

{
    "total": 1,
    "page": 1,
    "records": 1,
    "rows": [
        [ "1", "office_2782", "UK", "500",  "v3.05", "yesterday", "today",
          "no note", "read-only" ] 
    ]
}

The reason of such strange at the first glance JSON data is that jqGrid is designed to support paging, sorting and filtering/searching of data implemented on the server. So the parameters rows=10&page=1&sidx=id&sord=desc from the url sent to the server mean that jqGrid asks the server to get the first page (page=1) of the data with the page having 10 rows per page (rows=10). The data should be previously sorted by id (sidx=id) in the descending order (sord=desc). If you has small number of rows (under some hundert for example) you can use client based sorting, paging and filtering if you add loadonce:true parameter of the jqGrid, but the server based implementation allows you to work with really large dataset having many hundred thousands rows of data with very good performace.

I recommend you to read my this answer where I tried to explain how the additional elements of the server response "total", "page" and "records" will be used. The values of the parameters can be encoded in JSON either as numbers or as strings (on your taste).

If the user clicks on the column header of the 'location' column for example jqGrid will send new request to the server having sidx=location&sord=asc in the url. So it is important to understand, that the server can be asked to provide the data for the grid not once per grid, but many times and the request will contain some parameters chosen by the user who works with the jqGrid.

Defining of jsonReader (and sometimes additional jsonmap parameters for every column) you describe the structure of the server response. Using the information jqGrid read the response and fill the grid.

The demo shows that with the corresponding jsonReader you can read even your original JSON data.

The last advice for you from me would be to consider at the beginning to use loadError event handle which helps to inform the user about the errors reported by the server. In the answer I have shown how it can be implemented in the case of ASP.NET MVC. I don't use spring MVC myself so I can't give you direct examples of how to better implement the error reporting in spring MVC, but the main idea is the same in any server technology: in case of errors the server should respond with the response having an error HTTP status code. Inside of your implementation of the loadError event handle you decode the response and display the information about the error.