Treegrid

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. Checkboxes can be displayed 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.
  4. Header checkbox ( new in v5.2.0 ) is useful in case of multiple root nodes.
  5. Checkboxes can be disabled based on a static/runtime condition by adding pq_tree_cb hidden column with an editable callback.

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:

They 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 with help of treeModel.render callback as done in this example for `license.txt` node.

Summary:

The data in columns can be summarized at every change of hierarchy level in two ways:

  1. When treeModel.summary is true, values in all children nodes of a parent are summarized and displayed in a separate summary row at its bottom

  2. When treeModel.summaryInTitleRow is true, values in all children nodes of a parent are summarized and displayed in the parent node itself. No extra summary row is generated in this case.

Paging:

Treegrid is not compatible with paging.

Hierarchical lines:

New in v9.1.0, the lines connecting the nodes in treegrid help to visualize the relationships between them.