Tree (Angular)
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
-
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 conditionevent.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 conditionevent.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.
