Tree Grid

The tree grid component merges qualities of the data grid component and the tree component. Essentially, the tree grid is a data grid that has a tree as one of its columns. Every tree node has a grid row, but grid rows are visible only for visible tree nodes.

You might want to use a tree grid instead of a data grid if your data grid contains nested, tree-like data, and you want to allow the user to collapse and expand the data in the grid.

You might want to use a tree grid instead of a tree if you want to include more information in each tree node than simply a label and icon.

Creating a tree grid is similar to making a tree grid and a tree. All of the data grid–like properties are where they would be for a data grid. Most tree-like properties can be found in the properties of the Tree Grid component, or in the properties of the column editor that controls the tree column. Properties that would be grouped under "Lines" in the tree component can be found as the properties of the Rows node.

Selection in the tree grid works like selection in the tree. In both cases, the Selected Index property is based on the number of nodes from the top and varies depending on which nodes are expanded. In contrast, the Selected Items and Selected Items Data properties are based on the Item ID. See Selection Properties.

Before you can configure a Tree Grid component, you need:

• Tables that are set up as they would be for a Tree component.
• A dataflow symbol that is set up as for a tree component.

To configure a tree grid component:

1. Choose Insert > Components > Tree Grid.
2. In the Outline, select the tree grid, and configure these properties as you would for a tree.
   1. Table
   2. Data Symbol (The name of your dataflow symbol.)

3. In the Outline, select Tree_Grid > Columns > Column 0, and enter values for (if the tree grid has no tree column, select the tree grid and click Add Tree Column first; this button is only shown while no tree column exists):

   1. Item ID Column (The table column that holds unique identifiers. The default is row. If the column doesn't exist, the tree column is not displayed.)
   2. Name Column (The table column that contains text to display.)
   3. Has Children Column (The table column that tells whether a node has children. If you don't configure this, an attempt to load children can be made for any node.)
   4. Symbol (The visual symbol used to represent tree nodes, if you are using one.)

   Now you have a tree in one of your columns. Which nodes are visible in this tree determines which rows in the data grid are visible.

4. In the Outline, select the tree grid again, and click Add Column to add column editors. This will determine what data from the source table appears in the grid columns.
5. In the Outline, select a column, and choose whether it is an All, Name, or Repeater column editor. See Data Grid.
6. If you want, add categories or symbols. See Data Grid.

Select the tree grid in the Outline to see the Tree Grid section of the Property Inspector. It combines data grid and tree properties:

The Rows node has the same properties as data grid rows, plus a Tree Lines section (line color, stroke style and weight) and an Indent property (default 16 px) under Position and Size.

The tree column editor shows Item ID Column, Name Column and Has Children Column instead of Type, Selector and Configuration Table.