TreeGrid (Angular)link

This guide demonstrates how to use the TreeGrid component

TreeGrid Propertieslink

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 Propertieslink

Name	Type	Default	Description
TextProperty	string	null	Property name for level used as nodes text.
Leaf	boolean	false	Is level expandable.

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, level and children as argument.

Angular declarationlink

<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 TreeGridlink

Source Code

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.