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

Question

I have been working with jqGrid and there are some useful questions and answers regarding the Adjacency model and I have got everything I need hooked up and working except sorting.

The problem is actually replicated in the answer link above. Can anyone see what needs fixing? Oleg appears to be the expert on this!

I have tried the options in this question but I think the current version (4.1.2) may have a new bug? Please prove me wrong.

I also see the example on http://trirand.com/blog/jqgrid/jqgrid.html > New in 3.4 > Tree grid Adjacency Model works but that example is not using the loaded:true property as described in the first referenced answer of this question

Modulate

Answer 1

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:

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; }
    }
});

Noah

Much appreciated. I thought I had to negate the null check in grid.treegrid.js on line 236 but this will also work. Appreciate the hard work you put into jqGrid and the community :) – Modulate

Thank you for this marvelous answer! I've been diving through deep dark depths of google hell trying to figure out how to make this work! – Ryder

@RyanG: You are welcome! I'm glad that my old answer could help you too. – Noah

Answer 2

By sorting, do you mean, auto-sorting the tree options such that they fall under the appropriate nodes, or being able to sort by other rows (the second of which doesn't really make sense, as the tree organizes the data, so I'm not sure how sorting would make sense.)

Here is a jsFiddle with a local adjacency tree - is this a better description of your problem? For example, in the data below, the id = 4 or 5 should belong to id = 1, but instead they show up under 3.

Here, the data is:

var mydata = [
    {id: "1", label:"No 1", number:"02200220", status:"OPEN", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "2", label:"No 2", number:"77733337", status:"ENTERED", level:"0", parent: "", isLeaf: false, expanded:true, loaded:true},
    {id: "6", label:"No 2a", number:"12345123", status:"WIRED", level:"1", parent: "2", isLeaf: true, expanded:false, loaded:true},
    {id: "3", label:"No 3", number:"02200111", status:"OPEN", level:"0", parent: "", isLeaf: false},
    {id: "4", label:"No 1a", number:"02200221", status:"OPEN", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true},
    {id: "5", label:"No 1b", number:"02242320", status:"CLOSED", level:"1", parent: "1", isLeaf: true, expanded:false, loaded:true}
];

Lookeron

Thanks for responding Adam. By sorting I mean clicking on column headings to sort by a column. This is perfectly demonstrated in your example (and the linked example) as not working. Sorting by ID, for example, has no effect. The data appearing under the wrong node is not part of my question. Using XML data, I do not have that issue :S I'm only really concerned about the root node sorting as I can handle the rest server-side. – Modulate

Hmm... can't seem to get it to work either - nested seems to sort slightly better, although things not on the parent level just fall off to the bottom: jsfiddle.net/aUDHx/4 - perhaps post on the trirand.com blog as they seem to have had this issue before: trirand.com/blog/?page_id=393/bugs/… – Lookeron