jqGrid Sort or Search does not work with columns having json dot notation

I have this jqGrid:

$("#report").jqGrid( {
        url:        '/py/db?coll=report',
        datatype:   'json',
        height:     250,
        colNames:   ['ACN', 'Status', 'Amount'],
        colModel:   [ {name:'acn', sortable:true},
                      {name:'meta.status', sortable:true},
                      {name:'amount'} ],
        caption: 'Show Report',
        rownumbers: true,
        gridview: true,
        rowNum: 10,
        rowList: [10,20,30],
        pager: '#report_pager',
        viewrecords: true,
        sortname: 'acn',
        sortorder: "desc",
        altRows: true,
        loadonce: true,
        mtype: "GET",
        rowTotal: 1000,
        jsonReader: {
            root: "rows",
            page: "page",
            total: "total",
            records: "records",
            repeatitems: false,
            id: "acn"
            }
     });

Notice that the column 'meta.status' is in JSON dot notation and accordingly the data sent from the server is like this:

{"page": "1", "total": "1", "records": "5", "rows": [ 
        {"acn":1,"meta": {"status":"Confirmed"}, "amount": 50},
        {"acn":2,"meta": {"status":"Started"}, "amount": 51},
        {"acn":3,"meta": {"status":"Stopped"}, "amount": 52},
        {"acn":4,"meta": {"status":"Working"}, "amount": 53},
        {"acn":5,"meta": {"status":"Started"}, "amount": 54} ] }

The problems are of two fold:

Sorting does not work on columns with dot notation, here "meta.status". It does not even show the sortable icons on the column header, and nothing happens even if the header is clicked. Sorting does not work, whether loadonce is true or false.
If I try Searching (after setting loadonce to true) for the column meta.status (other columns without dot notation is okay), then it throws up a javascript error like this.

Answers:

After changing of the definition of the last column from {name:amount} to {name:'amount'} I could reproduce your problem: the sorting on 'Status' not work, but I could not see any error message (see the demo).

One can fix the problem it one change the definition of the second column from

{name:'meta.status', sortable:true}

{name:'status', sortable:true, jsonmap: "meta.status"}

See the fixed demo here.

As a rule of thumb to avoid this problem:

Ensure that your name and index values are the same

name: 'Date', index: 'Date',
name: 'Clicks', index: 'Clicks',
...

Ensure you set something like
```
$("#jqGrid").setGridParam({datatype: 'local'}); 
```
And that when you reload the grid - you correct this to "JSON" on reload if you're using it - i.e.
```
$("#yourGridID").setGridParam({datatype: 'json'}).trigger("reloadGrid");
```
Lastly, ensure that you use
```
name: 'Date', index: 'Date', sortable:true
```
Where you need it.

jqGrid Sort or Search does not work with columns having json dot notation

Answers:

Tags

Recent Questions

Top Questions