Question

I’m using jqGrid as a treetable with the adjacency datatype (as I understand it). Nesting is working fine, but for some reason the child rows display above their parents instead of below them:

$(function() {

$("#features").jqGrid({
    height:'100%',
    sortname: 'name',
    treeGrid: true,
    loadonce: true,
    treeGridModel: 'adjacency',
    treedatatype: 'local',
    ExpandColumn: 'name',
    datatype: "local",
    colNames:["id","Name"],
    colModel:[
        {name:'id',index:'id', hidden:true,key:true},
        {name:'name',index:'name',width:200}
    ],
    jsonReader: {
        repeatitems: false,
        id: "id",
        root: function (obj) { return obj; },
        page: function (obj) { return 1; },
        total: function (obj) { return 1; },
        records: function (obj) { return obj.length; }
    }
 });
}

showSummaryTable(jQuery.parseJSON('[{"id":"1","name":"Here is a nested  row.","level":1,"isLeaf":true,"expanded":false,"parent":"0"},{"id":"0","name":"Parent","level":0,"isLeaf":false,"expanded":false,"parent":""}]'));
});

    function showSummaryTable(data) {
        var thegrid = $("#features");
        thegrid[0].addJSONData({
            total: 1,
            page: 1,
            records: data.length,
            rows: data
         });            
    }

Here’s what I end up with:

Answer 1

It turns out that the order of the records in the JSON is important. They must be sorted from lowest level (parent) to highest. Once I sorted the JSON my problem was solved.