Tree (Angular)link

This guide demonstrates how to use the Tree component.

Tree Propertieslink

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 Propertieslink

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 Eventslink

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 declarationlink

<rz-tree #tree0 [data]="getCustomersResult" (nodeExpand)="tree0NodeExpand($event)">
  <rz-tree-level textProperty="CompanyName">
    <ng-template let-data>
    <strong>{{data?.CompanyName}}</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 appearancelink

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 treelink

Source Code

Add Northwind as new Microsoft SQL data-source. More info.
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 true.
Bind the Tree component to Northwind Customers, set Schema to Customer and set CompanyName as the first (root) level TextProperty.
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.
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.
Run the application and expand nodes.