Tree

Demonstration and configuration of the Radzen Blazor Tree component.

In this demo an inline-defined tree shows car brands (BMW, Audi, Mercedes) with their models (M3/M5, RS4/RS6, C63/S63 AMG), using custom Template to display brand logos and bold text, with Expand, Collapse, and Change events logged to console.

Example
Edit Source

Inline definition

BMW
Audi
Mercedes

Console log

Keyboard Navigation link

The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Tree component.

Press this key	To do this
Tab	Navigate to a Tree component.
UpArrow	Select previous hierarchical Tree item.
DownArrow	Select next hierarchical Tree item.
RightArrow	Expands selected Tree item.
LeftArrow	Collapse selected Tree item.
Enter or Space	Check/uncheck selected Tree item if CheckBox is available.

All the tools in one place

Save Hours on Every Project

With Radzen Blazor subscription you get the full toolkit, including:

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

CRUD Operations and Data Management

Seamless Integration

Digital Transformation and Modernization

Design Systems and Consistency

From Prototyping to Production

Time to Market Reduced

Empower the Next Generation

Tree

Inline definition

Keyboard Navigation link

Save Hours on Every Project

On this page

Demos Configuration