Using key/value pairs for jqGrid cell data

Question

I have a jqGrid defined as such:

$("#tableFeedbackReports").jqGrid({
            url: '/FeedbackReports/GetFeedbackReport',
            datatype: 'json',
            colNames: ['ColA', 'ColB', 'ColC', 'ColD'],
            colModel: [{ name: 'ColA', index: 'ColA', width: 60 },
                        { name: 'ColB', index: 'ColB', width: 60 },
                        { name: 'ColC', index: 'ColC', width: 60 },
                        { name: 'ColD', index: 'ColD', width: 60 }, 
/* ... and so on */

Now, when the ajax call returns, it's has to return an array of what will go into each row.

['value', 'value', 'value']

Is it possible to get jqGrid to accept key/value pairs for row data?

[{ 'ColA' : 'value', 'ColB' : 'value', 'ColC' : 'value', 'ColD' : 'value'}]

So when jqGrid loads the data, it'll automatically binds the data to the column in the model?

Answer 1

Have a look at the jsonReader option on the jqGrid Wiki, specifically its repeatitems property. From that page:

The repeatitems element tells jqGrid that the information for the data in the row is repeatable - i.e. the elements have the same tag cell described in cell element. Setting this option to false instructs jqGrid to search elements in the json data by name. This is the name from colModel or the name described with the jsonmap option in colModel.

Their example is:

jQuery("#gridid").jqGrid({
...
   jsonReader : {
      root:"invdata",
      page: "currpage",
      total: "totalpages",
      records: "totalrecords",
      repeatitems: false,
      id: "0"
   },
...
});

Which will process data in the following format, with key/value pairs:

{ 
  totalpages: "xxx", 
  currpage: "yyy",
  totalrecords: "zzz",
  invdata : [
    {invid:"1",invdate:"cell11", amount:"cell12", tax:"cell13", total:"1234", note:"somenote"},
    {invid:"2",invdate:"cell21", amount:"cell22", tax:"cell23", total:"2345", note:"some note"},
  ...

] }