jqGrid Not Loading Data

The answer of Paul is absolutely correct. You should just use jsonReader : {repeatitems: false}. I decide to write some more additional information only to clear why jqGrid could not read your original data at the beginning. I want additionally describe how jsonReader parameter can help to read JSON or XML data returned from the server.

First of all you can read almost any input JSON data in jqGrid. You should just define the jsonReader parameter which describe how the data should be read. For example the data in your original format do can be read by jqGrid with respect of the following jsonReader:

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

You can see on the demo that the way really works. You can read more about this in my old answer where I suggested to use functions as parameters of jsonReader in situations like youth.

Why is it needed at all to provide the data in so strange form in the server response? Why the jsonReader is needed? The reason is that jqGrid allows the server to implement sorting, paging and optionally filtering/searching. So the request to the server is not like “please get me the list of the users”, but more like “please sort the users by the last name and get me the 5-th page of the data where the page consists of 10 rows”. The page size (10 in the case) will be get from the combobox of the jwGrid pager. The rowList array parameter defines the list of possible values and the user can choose the page size which he/she prefer.

The returned data should contain not only up to 10 requested rows of the data, but tree additional parameters: “total”, “page” and “records” which describes some fields which will be filled in the pager:

The data, which build the grid contain, are array of objects. Every array item hold the information about one grid row. The array item can be either the object with named properties like

{"id":"55132687-b0bd-4c89-97cb-122d127429eb","name":"Pathway 1"}

or the object like

{"id":"55132687-b0bd-4c89-97cb-122d127429eb",
 cell:["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]}

or the arrays like

["55132687-b0bd-4c89-97cb-122d127429eb","Pathway 1"]

To read data in the first format one should use jsonReader:{repeatitems:false}. The second format is default and to read the data one need not define any jsonReader. To read data in the last format we should define jsonReader:{cell:''} and additionally key:true for the id column. The last format in the most compact, but it can be used only if one from the column of jqGrid has unique data which can be interpret as the id. The id is important, because jqGrid build HTML table with <tr> element having exactly the id which one post back. No id duplicates inside one page are permitted corresponds to HTML specifications.

The final remark. If you don’t can or don’t want to implement paging and sorting on the server side you should return all data in the server response and use loadonce:true parameter of jqGrid. This will follow to changing the datatype parameter of jqGrid to ‘local’ after the first data load. After that, the sorting and paging of data will be done inside of JavaScript code of jqGrid.