Question

I am having trouble constructing a jqGrid TreeGrid using local data. This method works just fine as a regular grid if you comment out the treeGrid and ExpandColumn attributes, but once you add those to try to make it a tree grid, it doesn’t create a tree grid (it just creates a “normal” grid), and it no longer sorts properly.

I ensured that I downloaded the proper TreeGrid files during the jqGrid download.

jQuery(function(){

  var gridOptions = {
    datatype: "local",
    height: 250,
    colNames: ['Name', 'Type', 'Last Modified On', 'Last Modified By'],
    colModel: [{name: 'name', index: 'name', width: 200, sorttype: 'text'},
           {name: 'type', index: 'type', width: 200, sorttype: 'text'},
           {name: 'modifiedon', index: 'modifiedon', width: 200, sorttype: 'date'},
           {name: 'modifiedby', index: 'modifiedby', width: 200, sorttype: 'text'}],
    treeGrid: true,
    ExpandColumn: 'name',
    caption: "My Grid"
};

    jQuery("#treeGrid").jqGrid(gridOptions);

var gridData = [
    {name: "My File", type: "My File Type", modifiedon: "03/10/2010", modifiedby"Strong Sad", lft: "1", rgt: "8", level: "0"},
    {name: "One of Everything", type: "Word Document", modifiedon: "02/12/2009", modifiedby: "Strong Bad", lft: "2", rgt: "5", level: "0"},
    {name: "My Presentation", type: "PowerPoint", modifiedon: "01/23/2009", modifiedby: "The Cheat", lft: "3", rgt: "4", level: "0"}
];

for (var i = 0; i < gridData.length; i++) {
    jQuery("#treeGrid").jqGrid('addRowData', i + 1, gridData[i]);
}

});

Answer 1

There are also other warnings in the TreeGrid documentation and most of them seem to apply to what you try to do.

• Currently adding nodes with addRowData is not supported.
• Adding nodes is currently not supported.
• Currently jqGrid can work only with data returned from server.

It seems all of these three warnings apply to you. You use addRowData you try to add nodes to an “empty” Tree and you try to use local data instead of “data returned from server”.

So I advise you to construct your sample to match the Treegrid real world example (can be found on the left side under “New in version 3.5”)

---

The documentation for TreeGrid you linked to states:

In order to use this module you should
mark the Treegrid when you download
the grid. For more information refer
to Download. For Developers – this is
the grid.treegrid.js in the src
directory.

Did you do this? Are the relevant js-files for TreeGrid included in your js-files for jqGrid?

A quick copy/paste of your code on jsbin works for me

http://jsbin.com/afuza/edit (then hit the preview button)