Tree

This guide demonstrates how to use the Tree component.

Tree Properties

Name Type Default Description
Name string ‘tree’ + index suffix Unique name of the tree.
Data array null Tree root data.
Levels array null Tree hierarchy levels/settings.

Tree Level Properties

Name Type Default Description
TextProperty string null Property name for level used as nodes text.
Leaf boolean false Are the nodes from this level leaves or not.
Schema string null The schema (entity) which this level represents. The TextProperty values are the properties of the Schema.
Template string null The template of the nodes from this level. The current data item is available as data.

Tree Events

Name Type Default Description
NodeLoaded event null Fired when node is loaded. Node data item, level and leaf as argument.
NodeSelect event null Fired when node is selected. Node data item and level as argument.
NodeExpand event null Fired when node is expanded. Node data item and level as argument.

Angular declaration

<rz-tree #tree0 [data]="getCustomersResult" (nodeExpand)="tree0NodeExpand($event)">
  <rz-tree-level textProperty="CompanyName">
    <ng-template let-data>
    <strong></strong>
    </ng-template>
  </rz-tree-level>
  <rz-tree-level textProperty="OrderID">
  </rz-tree-level>
  <rz-tree-level [leaf]="true" textProperty="ProductID">
  </rz-tree-level>
</rz-tree>

Customizing the node appearance

By default the tree component displays the property specified via TextProperty as the node label. You can customize that via the Template property of the level.

Template examples:

  • <strong>${data.FirstName}</strong> - display the FirstName property in a <strong></strong> element.
  • Full Name: ${data.FirstName} ${data.LastName} - display two data item properties in the node.

Customers, Orders and Order Details as tree

  1. Add Northwind as new Microsoft SQL data-source. More info.

  2. Create new page, drag-and-drop a Tree component from the toolbox and define three levels for Customers, Orders and Order Details. Set the last level Leaf property to false.

  3. Bind the Tree component to Northwind Customers, set Schema to Customer and set CompanyName as the first (root) level TextProperty.

  4. Create new handler for the NodeExpand event of the Tree component and invoke getOrders() data-source method with $filter parameter CustomerID eq '${event.data.CustomerID}' and condition event.level == 0. Add Execute JavaScript Then for the handler with value ${event.children = result.value}. Set the Schema property of the second level to Order and TextProperty to OrderID.

  5. Create new handler for the NodeExpand event of the Tree component and invoke getOrdersDetails() data-source method with $filter parameter OrderID eq ${event.data.OrderID} and condition event.level == 1. Add Execute JavaScript Then for the handler with value ${event.children = result.value}. Set the Schema property of the third level to OrderDetail and set TextProperty to ProductID.

  6. Run the application and expand nodes.

Get Radzen

Sign-up to download the free 30-day Radzen trial.