jQuery tree grid displays data in a hierarchy, it supports loading data locally and remotely. Treegrid is built on top of grid, so it borrows and supports same features as of grid except few minor differences as mentioned below:

It's mandatory for every row ( parent as well as children nodes ) in treegrid to have unique id field.

The data can be in either nested or plain format.

  1. In nested format, every parent node/row has children property ( in array format ) as in this example.
  2. In plain or flat format, every child row has parentId property which stores unique id of its parent. It helps grid to establish line of ancestory of nodes.

API:

  1. All the treegrid configuration options are available under treeModel
  2. All the methods to manipulate treegrid are available with Tree() object.
  3. Related events are beforeTreeExpand, treeExpand, beforeCheck, check.

Checkbox:

  1. It supports display of checkbox in all or some nodes which can be checked through UI or programmatically.
  2. Checkboxes can be checked in cascade fashion, i.e., every check of child node affects its parent nodes and every check of parent node affects its children.
  3. Selections can be bound to checkboxes.

Checkbox states are saved in rowData.pq_tree_cb by default as true, false or null (indeterminate states).
All checked rows can be found by a call to grid.Tree().getCheckedNodes()

Row Selections:

Selections work the same in grid and treegrid, so beforeRowSelect, rowSelect event and SelectRow() API can be used for treegrid too except a minor caveat in case when row selections are bound to checkboxes as mentioned.

SelectRow object has two categories of methods: one to manipulate the row selections and other to read state of selections. When checkboxes are bound to row selections, only the second category of methods of SelectRow() API to read state of selections can be used. To manipulate row selections, checkbox selection API of Tree() should be used. beforeRowSelect, rowSelect events are not fired, instead beforeCheck, check events are fired.

Icons:

Custom icons can be displayed beside the nodes.

Summary:

The data in columns can be summarized at every change of hierarchy level similar to summary with row groupings.


Please note that treegrid is not compatible with paging.