Search code examples
jqgridtreegrid

TreeGrid in jqGrid not working properly


I am using treegrid with jqGrid and am quite new to this plugin. I am not able to get the treegrid feature working properly. The first time when I click the expand button it works fine. The next time, when I click to collapse, it gives me javascript error: $t.p.data[pos] is undefined This is in the setTreeNode method of jqGrid.

I hope Oleg or someone will help or give me a pointer.

My configuration is as follows:

var grid = $("#grid").jqGrid({
    treeGrid: true,
    treeGridModel: 'adjacency',
    ExpandColumn: 'businessAreaName',
    ExpandColClick : true,
    url:'agileProgramme/records.do',
    datatype: 'json',
    mtype: 'GET',
    colNames:['Id'
              , 'Business Area'
              , 'Investment'
              , 'Org'
              , 'Goal'
    ],
    colModel:[
/*00*/          {name:'agileProgrammeId',index:'agileProgrammeId', width:0, editable:false,hidden:true},
/*01*/          {name:'businessAreaName',index:'businessAreaName', width:160, editable:false},
/*02*/          {name:'programmeName',index:'programmeName', width:150, editable:false, classes:'link'},
/*03*/          {name:'org',index:'org', width:50, editable:false, classes:'orgHierarchy', sortable : false},
/*04*/          {name:'goal',index:'goal', width:70, editable:false}
    ],
    treeReader : {
        level_field: "level",
        parent_id_field: "parent", 
        leaf_field: "leaf",
        expanded_field: "expanded"
    },
    autowidth: true,
    height: 240,
    pager: '#pager',
    sortname: 'id',
    sortorder: "asc",
    toolbar:[true,"top"],
    caption:"TableGridDemo",
    emptyrecords: "Empty records",
    loadonce: true,
    jsonReader : {
        root: "rows",
        page: "page",
        total: "total",
        records: "records",
        repeatitems: false,
        cell: "cell",
        id: "agileProgrammeId"
    }
});

The data returned when the column is expanded is as below.

{
   "page":"1",
   "total":"1",
   "records":"1",
   "rows":[
      {
         "agileProgrammeId":2,
         "businessAreaName":"child",
         "programmeName":"childSomething",
         "goal":null,
         "parent":1,
         "level":"1",
         "leaf":true,
         "expanded":false
      }
   ]
}

Here is the data which is initially loaded.

{
   "page":"1",
   "total":"1",
   "records":"1",
   "rows":[
      {
         "agileProgrammeId":1,
         "businessAreaName":"parent",
         "programmeName":"parentsomething",
         "goal":null,
         "parent":null,
         "level":"0",
         "leaf":false,
         "expanded":false
      }
   ]
}

Solution

  • I debugged the grid with the data which you posted and find out that the reason are the two lines of code where the local data are removed in case of loadonce: true.

    TreeGrid save the previous loaded data locally in the same way as loadonce: true do in case of "standard" grid. So setting of loadonce: true has no sense in case of TreeGrid. Moreover how you know now setting loadonce: true in case of TreeGrid has side effects.

    So to solve your problem you should just remove loadonce: true from the TreeGrid definition.

    UPDATED: I posted just now the suggestion to eliminate the problem which you have now in the future.