Treegrid with JSON data in jqgrid

Question

I am testing trees in jqgrid, so far I am only able to create something like below

I want to have something like jqGrid Demo page

I came up with the below code, but no idea how should I go about expanding each row 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 try to use Tree Grid with absolutely wrong formatted data. You should see tree grid as a grid with some additional hidden columns which defines the tree structure. The names of the columns depends on the value of the treeGridModel parameter. I recommend you to use treeGridModel: "adjacency". In the case the names of the hidden columns will be:

level, parent, isLeaf, expanded, loaded, icon

In case of treeGridModel: 'nested' there are lft and rgt instead of parent column.

Because every item of the tree (root nodes and all subitems) represents grid's row which will be placed in the grid every item have to have id. In your original version of the topicjson variable the you defined ids only for the root elements (elements of the level 0).

We can modify your original example to the following:

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 modification on the demo here:

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

I removed hidden column id from the tree grid because the id will be saved additionally as the id attribute of the corresponding <td> element. If you don't plan to make the column visible I would recommend to place the id property only in the input data of the tree (in topicjson).

One more important remark. All grid rows will be filled in exactly the same order in which they are in the input data. So you have to place the child nodes of the node immediately after its parent. I placed the corresponding change request in the trirand forum. So probably the requirement about the strict order of the input data for the tree grid will be changed somewhere later.

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