Tree grid

A tree grid is a grid with treegrid="true": its rows form a hierarchy, and the cells of one column carry the toggles that open and close each branch. Below is the real tree grid of the AWE React client. Open the departments, select a row and change the attributes: the XML below follows.

Live preview

LightDark

Controls

Levels shown at start

Roots onlyTwo levelsAll levels

Toggle icons

Plus and minusChevrons

Multiple selection

XML

<grid id="demo"
      initial-level="2"
      treegrid="true"
      tree-id="id"
      tree-parent="parent"
      tree-leaf="isLeaf"
      expand-column="name"
      initial-load="query"
      target-action="Departments"
      load-all="true">
  <column name="name" label="Department" component="text" charlength="24" />
  <column name="owner" label="Head" component="text" charlength="14" />
  <column name="people"
          label="People"
          component="text"
          charlength="8"
          align="right" />
  <column name="budget"
          label="Budget (kEUR)"
          component="progress"
          charlength="14"
          align="right"
          bar-max="5500"
          bar-leaf-only="true" />
</grid>

Attributes

The controls above write these attributes. The reference lists every attribute, its type and default. Attributes in the XSD reference

Attribute	Control	Values
initial-level	Levels shown at start	123
icon-expand and icon-collapse	Toggle icons	pluschevron
multiselect	Multiple selection	true / false

Events and actions

Event	Description
select-row	A row is selected: dependencies and actions that listen to the grid run.

Action (type)	What it does
tree-branch	Opens or closes a branch. Without load-all, opening a branch asks the server for its rows.
select-row	Selects the rows whose identifiers are in the value.
filter	Reloads the tree from its query.

Full reference

• Full documentation of this component
• XSD reference of the element

The rows are a fixture

The hierarchy comes from three fields of each row: id, parent (empty for a root) and isLeaf. In a screen they come from a query. With load-all="true" the grid receives the whole tree once, as here; without it, a branch is loaded from the server the first time it is opened.

Recipes

A tree with everything open

initial-level is how many levels of the tree are shown when the screen loads: 1 shows only the roots and 3 shows this whole tree.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      initial-load="query" target-action="Departments" load-all="true" initial-level="3">
  <column name="name" label="Department" component="text" />
  <column name="people" label="People" component="text" align="right" />
  <column name="budget" label="Budget (kEUR)" component="progress" align="right" bar-max="5500" bar-leaf-only="true" />
</grid>

bar-leaf-only draws the data bar of the budget only on the leaves, where it is not the sum of its children.

Pick several branches

multiselect adds a checkbox to every row, parents included, and the selection bar of the grid.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      initial-load="query" target-action="Departments" load-all="true" multiselect="true" initial-level="2">
  <column name="name" label="Department" component="text" />
  <!-- ... -->
</grid>

Your own toggle icons

icon-expand, icon-collapse and icon-leaf replace the plus and minus squares and the dot of a leaf. They take the icon names of AWE.

<grid id="departments" treegrid="true" tree-id="id" tree-parent="parent" tree-leaf="isLeaf" expand-column="name"
      icon-expand="chevron-right" icon-collapse="chevron-down" initial-level="2"
      initial-load="query" target-action="Departments" load-all="true">
  <column name="name" label="Department" component="text" />
  <!-- ... -->
</grid>

Events and actions

Opening or closing a branch runs the tree-branch action; selecting a row raises the same select-row event as in a flat grid. These examples run both for real. In a screen without load-all, opening a branch for the first time sends a server action (target-action) that answers with the children of the row, which this page does not simulate.

• tree-branch: opens or closes the branch of a row.
• select-row, select-all-rows, unselect-all-rows: change the selection.
• filter: reloads the tree from its query.

More

• Full documentation of grids and tree grids: every attribute, the tree attributes and the server side.
• XSD reference of the grid element.