jQuery - loading jqGrid - TreeGrid with array data

Question

I am trying to load the TreeGrid (jqGrid) with array data. But somehow hierarchy is not showing up. The data is only appearing in flat structure.

Code:

$("#list").jqGrid({
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'label',
    ExpandColClick: true,
    datatype: 'local',
    colNames:['Parent','Org','cd'],
    colModel:[
        {name:'parent',id:'parent',index:'parent', width:250, hidden: true,
            align: 'left', sortable: false, classes: 'indeling', title: false },
        {name:'label',id:'label',index:'label', width:250,align: 'left',
            sortable: false, classes: 'indeling', title: false, visible: false},
        {name:'cd',id:'cd',index:'cd', width:100,align: 'left', sortable: false,
            classes: 'indeling', title: false,visible: false }
    ],
    rowNum: 20000,
    viewrecords: true,
    height: "100%",
    treeIcons: { leaf: 'ui-icon-document-b' },
    hoverrows: false
});

then I add the rows in the array to the grid:

$('#list').jqGrid('addRowData',0,array[0]);
$('#list').jqGrid('addRowData',1,array[1]);

Structure of array:

array=[{parent:"",label:"1",cd:"32"},{parent:"1",label:"2",cd:"42"}]

can anyone help?

score 0 · Answer 1 · edited May 23 '17 at 11:49

You will find the answer of your question here.

You should don't use addRowData which is slow and will be mostly wrong used. For the parent node you should use parent: "null" or parent: null. Additionally you should include in the input data of TreeGrid other information which is required like level, isLeaf. All nodes required to have loaded:true to hold the node local.

It is important to use correct order of the items in the input. The order should corresponds the order of items in full expanded tree. So all children should follow the parent.

You should remove from colModel unknown properties like id and visible. The list of suported properties you can find in the documentation.

jQuery - loading jqGrid - TreeGrid with array data

1 Answers1