TreeGrid (Angular)
This guide demonstrates how to use the TreeGrid component
TreeGrid Properties
| Name | Type | Default | Description |
|---|---|---|---|
| Name | string | ‘treegrid’ + index suffix | Unique name of the TreeGrid. |
| Data | array | null | TreeGrid root data. |
| Columns | array of TreeGridColumn | empty | TreeGrid columns. |
TreeGrid Level Properties
| Name | Type | Default | Description |
|---|---|---|---|
| TextProperty | string | null | Property name for level used as nodes text. |
| Leaf | boolean | false | Is level expandable. |
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, level and children as argument. |
Angular declaration
<rz-treegrid #treegrid0 [data]="getEmployeesResult" (nodeExpand)="treegrid0NodeExpand($event)" (nodeLoaded)="treegrid0NodeLoaded($event)">
<rz-treegrid-column property="EmployeeID" title="Employee ID">
</rz-treegrid-column>
<rz-treegrid-column property="FirstName" title="First Name">
</rz-treegrid-column>
<rz-treegrid-column property="LastName" title="Last Name">
</rz-treegrid-column>
<rz-treegrid-column property="ReportsTo" title="Reports To">
</rz-treegrid-column>
<rz-treegrid-column property="Title" title="Title">
</rz-treegrid-column>
<rz-treegrid-column property="TitleOfCourtesy" title="Title Of Courtesy">
</rz-treegrid-column>
</rz-treegrid>
Employees as TreeGrid
-
Add Northwind as new Microsoft SQL data-source. More info.
-
Create new page, drag-and-drop a TreeGrid component from the toolbox, bind it to Northwind Employees, auto-generate columns and remove unwanted.
-
Create new handler for the NodeLoaded event of the TreeGrid component with type Execute JavaScript and value
${event.leaf = event.data.ReportsTo == null}.
-
Create new handler for the NodeExpand event of the TreeGrid component and invoke getEmployees() data-source method with $filter parameter
EmployeeID eq ${event.data.ReportsTo}. Add Execute JavaScript Then for the handler with value${event.children = result.value}.
-
Run the application and expand nodes.
