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.

Workflow Differences between Tree, Data Grid, and Tree Grid

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:

Creating a Tree Grid

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:

    1. Item ID Column (The table column that holds unique identifiers. If you don't include it, 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.