I am using Jqgrid Tree View model in ma application and what i can see is that it shows error as object or property is not supported i have included grid.Treeview.js and oth
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:
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
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.