TreeGrid

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

Source Code

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

  2. Create new page, drag-and-drop a TreeGrid component from the toolbox, bind it to Northwind Employees, auto-generate columns and remove unwanted.

  3. Create new handler for the NodeLoaded event of the TreeGrid component with type Execute JavaScript and value ${event.leaf = event.data.ReportsTo == null}.

  4. 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}.

  5. Run the application and expand nodes.

We are here for you

Making our users happy is always a priority for us.