Sorting of jqGrid (v4.1.2) treegrid not working with Ajacency Model

You are right. It was small bug in the data from my previous answers about

After some debugging I find out that the error is very simple: one should use parent: "null" or parent: null in the data instead of parent: "".

Additionally you have to define sorttype parameters in the grid to have sorting correctly with any data other as texts.

How you can see the modified demo support now the local sorting correctly:

enter image description here

First will be sorted root elements by the chosen column and then recursively all its children.

To make easy to find the new code in the searching engine I include the code of the demo below:

var mydata = [
        {id: "1", name: "Cash",        num: "100", debit: "400.00",  credit: "250.00",  balance: "150.00",   enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: false, loaded: true},
        {id: "2", name: "Cash 1",      num: "1",   debit: "300.00",  credit: "200.00",  balance: "100.00",   enbl: "0", level: "1", parent: "1",    isLeaf: false, expanded: false, loaded: true},
        {id: "3", name: "Sub Cash 1",  num: "1",   debit: "300.00",  credit: "200.00",  balance: "100.00",   enbl: "1", level: "2", parent: "2",    isLeaf: true,  expanded: false, loaded: true},
        {id: "4", name: "Cash 2",      num: "2",   debit: "100.00",  credit: "50.00",   balance: "50.00",    enbl: "0", level: "1", parent: "1",    isLeaf: true,  expanded: false, loaded: true},
        {id: "5", name: "Bank\'s",     num: "200", debit: "1500.00", credit: "1000.00", balance: "500.00",   enbl: "1", level: "0", parent: "null", isLeaf: false, expanded: true,  loaded: true},
        {id: "6", name: "Bank 1",      num: "1",   debit: "500.00",  credit: "0.00",    balance: "500.00",   enbl: "0", level: "1", parent: "5",    isLeaf: true,  expanded: false, loaded: true},
        {id: "7", name: "Bank 2",      num: "2",   debit: "1000.00", credit: "1000.00", balance: "0.00",     enbl: "1", level: "1", parent: "5",    isLeaf: true,  expanded: false, loaded: true},
        {id: "8", name: "Fixed asset", num: "300", debit: "0.00",    credit: "1000.00", balance: "-1000.00", enbl: "0", level: "0", parent: "null", isLeaf: true,  expanded: false, loaded: true}
    ],
    grid = $("#treegrid");

$.jgrid.formatter.integer.thousandsSeparator=",";
$.jgrid.formatter.number.thousandsSeparator=",";
$.jgrid.formatter.currency.thousandsSeparator=",";
grid.jqGrid({
    datatype: "jsonstring",
    datastr: mydata,
    colNames: [/*"Id", */"Account", "Acc Num", "Debit", "Credit", "Balance", "Enabled"],
    colModel: [
        //{name: 'id', index: 'id', width: 1, hidden: true, key: true},
        {name: 'name', index: 'name', width: 180},
        {name: 'num', index: 'acc_num', width: 80, formatter: 'integer', sorttype: 'int', align: 'center'},
        {name: 'debit', index: 'debit', width: 80, formatter: 'number', sorttype: 'number', align: 'right'},
        {name: 'credit', index: 'credit', width: 80, formatter: 'number', sorttype: 'number', align: 'right'},
        {name: 'balance', index: 'balance', width: 80, formatter: 'number', sorttype: 'number', align: 'right'},
        {name: 'enbl', index: 'enbl', width: 60, align: 'center',
            formatter: 'checkbox', editoptions: {value: '1:0'},
            formatoptions: {disabled: false}}
    ],
    height: 'auto',
    gridview: true,
    rowNum: 10000,
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'name',
    caption: "Demonstrate how to use Tree Grid for the Adjacency Set Model",
    jsonReader: {
        repeatitems: false,
        root: function (obj) { return obj; },
        page: function () { return 1; },
        total: function () { return 1; },
        records: function (obj) { return obj.length; }
    }
});

Leave a Comment