Tree Grid

To enable this feature, ensure grid.treegrid.js is loaded. For more information refer to Installation

Currently tree grid supports only the Nested Set model. Good articles describing this can be found here:

This feature uses the following properties, events and methods of the parent grid.

Properties

Property	Type	Description	Default
treeGrid	boolean	Enables (disables) tree grid. When this option is set to true, the following features are disabled: subGrid multiselect pager elements -- buttons, etc. -- (but not the pager itself) altRows .	true
treeReader	array	Array which extends the colModel defined in the basic grid. The fields described here are added to end of the colModel array and are hidden. This means that the data returned from the server should have values for these fields. For a full description of all valid values see treeReader properties.	empty array

Methods

All methods are public and can be used

In the methods below, record means the current record, which can be obtained via the getInd method

Method	Parameters	Description
collapseNode	record	collapse the node at specified record
collapseRow	record	collapses the current row
delTreeNode	rowid	Where rowid is the id of the row. Deletes the specified node and all child nodes of that node
expandNode	record	expand the node at the specified record
expandRow	record	expands the current row
getInd	object, rowid, rc	where object is the current set of grid rows (returned from jQuery("grid_id).rows); rowid is the id of the row; and rc should be set to true
getNodeAncestors	record	returns the ancestors of the specified record
getNodeDepth	record	returns the depth of the specified record
getNodeParent	record	returns the parent node of the specified record
getNodeChildren	record	returns the child nodes of the specified record; returns empty array if none
getRootNodes		returns an array of the current root nodes
isNodeLoaded	record	returns true if the node is already loaded
isVisibleNode	record	returns true or false if the node is visible or not
setTreeRow	rowid, data	this method is just like setRowData, but can be used when treeGrid is enabled. When we use tree grid we should use setTreeRow instead of setRowData (this will be improved in the future releases - autodetecting the mode and use only one method - setRowData)
SortTree	direction	direction is 'asc' or 'desc'; sorts the tree with the currently set sortname (sortname is from grid option)

CSS Requirements

Treegrid requires some additions to the css. The current release of jqGrid includes these in the accompanying css files. If you are using custom css files, you will need to add these:

.tree-wrap
{
float: left;
position: relative;
height: 18px;
white-space: nowrap;
overflow: hidden;
}
.tree-minus
{
position: absolute;
height: 18px;
width: 16px;
overflow: hidden;
background: url(images/tree_minus.gif) no-repeat;
}
.tree-plus
{
position: absolute;
height: 18px;
width: 16px;
overflow: hidden;
background: url(images/tree_plus.gif) no-repeat;
}
.tree-leaf
{
position: absolute;
height: 18px;
width: 16px;
overflow: hidden;
background: url(images/tree_leaf.gif) no-repeat;
}
.treeclick
{
cursor: pointer;
}

Cautions/Limitations

Currently adding nodes with addRowData is not supported.
Currently it is not recommended to combine inline editing and form editing with treegrid, or the expanded column will not be editable.
Adding nodes is currently not suported.
When we initialize the grid and the data is read, the datatype is automatically set to local. This is required because treegrid supports autoloading tree nodes. This means that, for speed or efficiency, you can load the data only for the root level first and load the data for a particular child node only when the operator clicks to expand that node. The grid will determine that there is no data and try to load the node from the server, but in this case the data that is sent to the server has to have additional parameters. Setting datatype to local permits intervening before the request is made to buidl the request correctly.
In this case, postData array would like this:
postData:{nodeid:rc.id,n_left:rc.lft,n_right:rc.rgt,n_level:rc.level}

In other words you can grab these values and do something like this to load the child nodes
SELECT category_name, level, lft, rgt FROM categories
WHERE lft > n_left AND rgt < n_right AND level = n_level +1
ORDER BY lft;

Once all the nodes are loaded we do not make any other request to the server

Known bugs

In FF2 and IE when trying to resize the expandable column the tree images are shown - i.e - wrapping does not resize.

Planned additions

expandAll and collapseAll methods
autoclosing tree nodes - when clicking on a node all other nodes at this level should be collapsed automatically and only the one clicked will be expanded
addNode, removeNode methods