Treegrid with JSON data in jqgrid

Question

I am testing trees in jqgrid so far I can only create something like below

I want to have something like a jqGrid demo page

I came up with the code below, but I don’t know how I should expand each line in the tree from the given json format

$('<table id="list2" cellspacing="0" cellpadding="0"></table></div>').appendTo('#topics'); var grid = jQuery("#list2"); grid.jqGrid({ datastr:topicjson, datatype: "jsonstring", height: "auto", pager: false, loadui: "disable", colNames: ["id","Items","url"], colModel: [ {name: "id",width:1,hidden:true, key:true}, {name: "elementName", width:150, resizable: false}, {name: "url",width:1,hidden:true} ], treeGrid: true, caption: "jqGrid Demos", ExpandColumn: "elementName", autowidth: true, //width: 180, rowNum: 200, //ExpandColClick: true, treeIcons: {leaf:'ui-icon-document-b'}, jsonReader: { repeatitems: false, root: "response" } }); 

Json format

 var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", "sub": [ { "subelementName": "Simple Grouping" }, { "subelementName": "May be some other grouping" } ] }, { "id": "2", "elementName": "CustomFormater", "sub": [ { "subelementName": "Image Formatter" }, { "subelementName": "Anchor Formatter" } ] } ] }; 

Answer 1

You are trying to use a Tree Grid with completely incorrect formatted data. You should see the tree grid as a grid with some additional hidden columns that define the tree structure. Column names depend on the value of the treeGridModel parameter. I recommend using treeGridModel: "adjacency" . In case the names of the hidden columns will be:

 level, parent, isLeaf, expanded, loaded, icon 

In the case of treeGridModel: "nested" is lft and rgt instead of the parent column.

Since each element of the tree (root nodes and all sub-elements) is a grid line to be placed in the grid, each element must have an identifier. In the original version of the topicjson variable topicjson you defined identifiers only for root elements (level 0 elements).

We can modify the original example as follows:

 var topicjson={ "response": [ { "id": "1", "elementName": "Grouping", level:"0", parent:"", isLeaf:false, expanded:false, loaded:true }, { "id": "1_1", "elementName": "Simple Grouping", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "1_2", "elementName": "May be some other grouping", level:"1", parent:"1", isLeaf:true, expanded:false, loaded:true }, { "id": "2", "elementName": "CustomFormater", level:"0", parent:"", isLeaf:false, expanded:true, loaded:true }, { "id": "2_1", "elementName": "Image Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true }, { "id": "2_1", "elementName": "Anchor Formatter", level:"1", parent:"2", isLeaf:true, expanded:false, loaded:true } ] }, grid; $('<table id="list2"></table>').appendTo('#topics'); grid = jQuery("#list2"); grid.jqGrid({ datastr: topicjson, datatype: "jsonstring", height: "auto", loadui: "disable", colNames: [/*"id",*/"Items","url"], colModel: [ //{name: "id",width:1, hidden:true, key:true}, {name: "elementName", width:250, resizable: false}, {name: "url",width:1,hidden:true} ], treeGrid: true, treeGridModel: "adjacency", caption: "jqGrid Demos", ExpandColumn: "elementName", //autowidth: true, rowNum: 10000, //ExpandColClick: true, treeIcons: {leaf:'ui-icon-document-b'}, jsonReader: { repeatitems: false, root: "response" } }); 

You can see the results of the change on the demo here :

In the example, I set the expanded:true property for the CustomFormater node to demonstrate that you can specify which nodes should be displayed in expanded form.

I removed the hidden id column from the tree grid because the identifier will be additionally saved as the id attribute of the corresponding <td> element. If you do not plan to display the column, I would recommend placing the id property only in the input of the tree (in topicjson ).

Another important point. All grid lines will be filled in exactly the same order in which they are in the input. Therefore, you must place the child nodes of the node immediately after your parent. I posted the corresponding change request in the trirand forum. Thus, it is likely that the requirement for a strict input order for the tree grid will be changed somewhere later.

UPDATED . To work with sorting correctly, you need to use parent:null or parent:"null" instead of parent:"" see here for more details.