Jqgrid Tree View Adjacencey

You code small simple errors, but the main problem which you have is that your code are made to add simple rows and not tree nodes. You can go on the official demo page and choose under "New in version 3.4" the demo "Tree Grid Adjacency model".

I wrote the demo which work exactly like the demo from the demo from the trirand demo page, but use only local data:

enter image description here

In you case you have to extend the objects from mydata with the properties level, parent, isLeaf, expanded:

var mydata = [
    {id:"1",Name:"Main Menu",MenuId:"1",MenuName:"Menu1",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"1_1",Name:"Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:false, expanded:false},
    {id:"1_1_1",Name:"Sub Sub Menu",MenuId:"1",MenuName:"Menu1",
     level:"2", parent:"1_1", isLeaf:true, expanded:false},
    {id:"1_2",Name:"Sub Menu1",MenuId:"1",MenuName:"Menu1",
     level:"1", parent:"1", isLeaf:true, expanded:false},
    {id:"2",Name:"Main Menu1",MenuId:"2",MenuName:"Menu2",
     level:"0", parent:"", isLeaf:false, expanded:true},
    {id:"2_1",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"2_2",Name:"Main Menu",MenuId:"2",MenuName:"Menu2",
     level:"1", parent:"2", isLeaf:true, expanded:false},
    {id:"3",Name:"Main Menu2",MenuId:"3",MenuName:"Menu3",
     level:"0", parent:"", isLeaf:false, expanded:false},
    {id:"3_1",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false},
    {id:"3_2",Name:"Main Menu",MenuId:"3",MenuName:"Menu3",
     level:"1", parent:"3", isLeaf:true, expanded:false}
];

Here I modified a little id values, because points should not used in ids. Additionally I set the expanded status of the "Main Menu1" to true to demonstrate only that you can expanded some nodes automatically immediately after the loading.

I modified the jqGrid definition to the following

$("#treegridsamp").jqGrid({
    datatype: "local",
    data: mydata, // will not used at the loading,
                  // but during expanding/collapsing the nodes
    colNames:['id','Name','MenuId','Menu Name'],
    colModel:[
        {name:'id',index:'id',width:100,hidden:true},
        {name:'Name',index:'Name',width:150},
        {name:'MenuId',index:'MenuId',width:100},
        {name:'MenuName',index:'MenuName',width:100}
    ],
    height:'auto',
    //pager : "#ptreegrid",
    sortname: 'id',
    treeGrid: true,
    treeGridModel: 'adjacency',
    treedatatype: "local",
    ExpandColumn: 'Name',
    caption: "Sample Tree View Model"
});

I made the 'id' column hidden and reduced the grid size. To add the data I used addJSONData method because it will set the tree nodes

$("#treegridsamp")[0].addJSONData({
    total: 1,
    page: 1,
    records: mydata.length,
    rows: mydata
});

As the result you will receive

enter image description here

You can see the demo live here.

UPDATED: If you use jqGrid version 4.0 or higher it is important to set loaded:true property for the tree nodes if you want have expanded. For example in the above example the "Main Menu1" item is a node (isLeaf:false) which should be display expanded (expanded:true), so one should add loaded:true for the item definition:

{id:"2", Name:"Main Menu1", MenuId:"2", MenuName:"Menu2",
 level:"0", parent:"", isLeaf:false, expanded:true, loaded:true}

For more examples see here, here, here and here.

UPDATED 2: To have sorting work correctly one have to use parent:null or parent:"null" instead of parent:"" see here for more details.

Recommended topics

Hot tags