Question

I am using jqgrid treeview with an asp.net-mvc backend and i see the GUI lets you click on other columns for sorting but i can’t find any documentation or examples on how to implement it.

When I click a column heading, my “Loading . . ” notification shows up but none of my server side actions are getting called.

I used httpwatch and i don’t see any calls trying to hit the server.

Does jqgrid treeview support sorting (this would just be sorting the top level in the tree)?

Here is my code:

$("#treegrid").jqGrid({
    url: '/MyController/GetData' + GetQuery(),
    datatype: 'json',
    footerrow: true,
    userDataOnFooter: true,
    mtype: 'GET',
    rowNum: 2000,
    colNames: ["ID", "Description", "Total 1"],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 1,
        hidden: true,
        key: true
    }, {
        name: 'desc',
        width: 240,
        index: 'desc',
        hidden: false,
        sortable: true
    },
            {
                name: 'total1',
                sorttype: 'int',
                index: 'total1',
                unformat: originalValueUnFormatter,
                formatter: bookMapFormatter,
                align: "right",
                width: 60,
                hidden: false,
                sortable: true
            }],
    treeGridModel: 'adjacency',
    height: 'auto',
    loadComplete: function (data) {


    },
    pager: "#ptreegrid",
    treeGrid: true,
    ExpandColumn: 'desc',
    ExpandColClick: true,
    caption: "My Treegrid"
});


 function bookMapFormatter(cellvalue, options, rowObject) {
     return booksFormatterEx(cellvalue, options, rowObject, "MyAction");
 }

function booksFormatterEx(cellvalue, options, rowObject, actionName) {
    var regularURL = '/MyController/' + actionName + GetQuery() + '&key=' + rowObject[0];
    return "<a target='_blank' href='" + regularURL + "' >" + cellvalue + "</a>";

}

Also if its helpful, i have serialized my json results (using the .net JavascriptSerializer class) (this is just the top level view as i go back to the server when users drill down)

 {"page":1,
 "total":1,
 "records":2,
 "userdata":{"desc":"Total:","total1":"10,753"},
 "rows":[{
 "id":"Group1","cell":["Group1","1 - 1 System(s)",723, 0, null, false, false, true]},
 {"id":"Group2","cell":["Group2","2 - 2 System(s)",2120, 0, null, false, false, true]},
 {"id":"Group3","cell":["Group3","3 - 3 System(s)",2017, 0, null, false, false, true]},
 {"id":"Group4","cell":["Group4","4 - 4 System(s)",1181, 0, null, false, false, true]},
 {"id":"Group5","cell":["Group5","5 - 5 System(s)",4712, 0, null, false, false, true]}]}

Answer 1

Tree grid has SortTree method which will be used to sort grid locally. No call to the server will be done. If the user click on the column header the same method will be called.

For better understanding I take your attention on one line from the jqGrid code:

if( ts.p.loadonce || ts.p.treeGrid) {ts.p.datatype = "local";}

which will be executed in case of usage datatype: 'json' or datatype: 'json'. So after the first loading of Treegrid the datatype will be changed to datatype: 'local'.

Depend on the other jqGrid data (loaded:true or loaded:false) the expanding of the tree node will be locally or the request will be send to the server. In any way the sorting of the data will be always implemented locally.

The only thing which if important to have correct sorting: one should use parent: "null" or parent: null in the data (not parent: "") for the root nodes (see here for details).

UPDATED: Additionally to the problem with parent: "null" or parent: null (which you not have in the JSON data) you have the problem with the usage of HTML inside of JSON response from the server. The JSON data which you posted are equivalent to the following:

{
    "page": 1,
    "total": 1,
    "records": 2,
    "userdata": {
        "desc": "Total:",
        "bookmapBooks": "10,753"
    },
    "rows": [
        {"id": "Group1", "cell": ["Group1", "<b>COMMODITIES</b> - 19  System(s)",         "<b>723</b>"]},
        {"id": "Group2", "cell": ["Group2", "<b>CREDIT</b> - 30 System(s)",               "<b>2,120</b>"]},
        {"id": "Group3", "cell": ["Group3", "<b>EQUITIES</b> - 23 System(s)",             "<b>2,017</b>"]},
        {"id": "Group4", "cell": ["Group4", "<b>MORTGAGE PRODUCTS</b> - 33 System(s)",    "<b>1,181</b>"]},
        {"id": "Group5", "cell": ["Group5", "<b>RATES AND CURRENCIES</b> - 40 System(s)", "<b>4,712</b>"]}
    ]
}

As I described before, the datatype of the grid will be changed to the 'local' after the first data load. The internal data parameter will be filled with the JSON data exactly in the format like you has in the JSON input. So for the column 'total1' you would has data like "<b>723</b>" or "<b>4,712</b>" which corresponds not the sorttype: 'int'. So adding "0", "null" for level: 0, parent: null will not full solve the problem of the grid sorting. The string "<b>4,712</b>" can’t been converted to int and so can’t be sorted as integer.

One more small remark. You probably want to use "userdata":{"desc":"Total:","total1":"10,753"} instead of "userdata":{"desc":"Total:","bookmapBooks":"10,753"}.

With respect of the usage of sorttype as function you could solve your problem and change the original grid

to the sortable grid

You can use the sorttype in the following form:

sorttype: function (val) {
    var strValue = $(val).text().replace(",",""); // replace thousandsSeparator
    return parseInt(strValue, 10);
}