Using a custom JSON format for jqGrid

Question

I have a JSON file that must be formatted as follows. How can I have jqGrid interpret this format using the jsonmap, colModel, or jsonReader options?

[
  {
    "element1" : {
      "subElement1" : "value",
      "subElement2" : "value"
    }
    "element2" : {
      "subElement3" : "value",
      "subElement4" : "value"
    }
  }, 

  {
    "element1" : {
      "subElement1" : "value",
      "subElement2" : "value"
    }
    "element2" : {
      "subElement3" : "value",
      "subElement4" : "value"
    },

    // . . . etc. . . .
  }
]

colNames will be ["subElement1", "subElement2", "subElement3", "subElement4"].

Thanks a lot for any help.

Answer 1

You could always just read the jQGrid API on formatting here: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options

Kind of tricky to provide you with custom formatters considering your values are all strings... It supports sorting for curreny and dates as well.

The demos provide source code here: http://www.trirand.com/blog/jqgrid/jqgrid.html

Also, pretty sure you can just specify a function as the format and in that function return the formatted value. For example, I wrote a function that took a status and returned an image with an icon for that status.

Here's an example:

jQuery("#list2").jqGrid({
    url:'server.php?q=2',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});