Select theme:

Material 3
warning

You are viewing the legacy Radzen documentation.

Radzen Blazor Studio has replaced Radzen as the primary RAD tool for Blazor applications.

Radzen Blazor Studio offers a modern UI, enhanced features, and improved performance to streamline your development process.

The latest documentation for Radzen Blazor Studio is available here: https://www.radzen.com/blazor-studio/documentation/

Open Radzen Blazor Studio docs

TreeGrid (Angular)link

This guide demonstrates how to use the TreeGrid component

TreeGrid Propertieslink

NameTypeDefaultDescription
Namestring'treegrid' + index suffixUnique name of the TreeGrid.
DataarraynullTreeGrid root data.
Columnsarray of TreeGridColumnemptyTreeGrid columns.

TreeGrid Level Propertieslink

NameTypeDefaultDescription
TextPropertystringnullProperty name for level used as nodes text.
LeafbooleanfalseIs level expandable.

image

Tree Eventslink

NameTypeDefaultDescription
NodeLoadedeventnullFired when node is loaded. Node data item, level and leaf as argument.
NodeSelecteventnullFired when node is selected. Node data item and level as argument.
NodeExpandeventnullFired when node is expanded. Node data item, level and children as argument.

image

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

  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. image

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

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

  5. Run the application and expand nodes. image

© 2016-2025 Radzen Ltd. All Rights Reserved.
Designed and developed with ❤️ in Radzen Blazor Studio.

Select theme:

Material 3