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. alt text



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:

  1. Ensure that your name and index values are the same

    name: 'Date', index: 'Date',
    name: 'Clicks', index: 'Clicks',
  2. 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");
  3. Lastly, ensure that you use

    name: 'Date', index: 'Date', sortable:true

    Where you need it.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.