The Blazor TreeView is a UI component that allows you to represent flat and hierarchical data in a tree-like structure in both WebAssembly (WASM) and server-side Blazor apps. It offers multiple built-in features such as navigation through the items and their children, loading data on demand, customization with templates for the individual nodes and keyboard navigation.
Moving nodes in the TreeView with the Drag and Drop functionality eases the workflow of the component. The feature is enabled from the Draggable parameter which then allows the user to drag and drop nodes within the TreeView or between TreeViews. The feature uses the OnDrop event which is fired when the node is dropped.
The TreeView component can be bound to any flat data source (collection of items available at one level) and hierarchy (multi-level parent-child relationship collection of items).
Example of binding TreeView to flat data.
The TreeView component allows you to additionally define different binding settings for the different levels of nodes. This provides great flexibility, as the children of a node can consume a different data field or model than their parent.
Example of Blazor TreeView hierarchical data that uses different models for the parent and child.
The TreeView component gives you full control over the look and feel of the nodes through it templates. You can define a common template for all TreeView nodes or a different template for each node level. Furthermore, the template can be used to render specific content according to your application's logic. You can use components in it and thus provide rich content instead of plain text.
Example of customizing Blazor TreeView component using templates.
The TreeView component allows you to fetch all the items at once, or load data on demand as the user expands the tree nodes. For cases when you need to load large volumes of data, you can boost the performance by using lazing loading (loading data on demand) and loading only expanded subset of child items.
The Telerik UI for Blazor TreeView set of events enables smooth and transparent interaction with the component. Here is a list of all events:
Add a checkbox to each row of your TreeView to let users select multiple items or even entire hierarchies of items in order to execute a single operation on them.
Explore the Blazor TreeView Checkbox in this demo
Nodes in the TreeView can be Selected so they can be processed in some way – e.g. selecting an item in TreeView displaying file and folder structure can open the file contents in a separate component.
Like all other Telerik UI for Blazor components, the TreeView component supports out of the box Keyboard Navigation and web accessibility standards implementation (WCAG, Section 508 and WAI-ARIA attributes for screen readers). This enables easy navigation through tree nodes using just keyboard, as well as access to component content through assistive technologies.
You can easily handle user actions from code using the TreeView OnExpand event. As the event fires when the user expands or collapses a node (either with the mouse, or with the keyboard) you can easily apply business logic to those actions.
The OnExpand event gives you flexibility to use lazing loading of TreeView data when a node is expanded by a user.
The Telerik Blazor TreeView has several built-in themes such as Default (our own styling), Material (based on the Material Design guidelines), Bootstrap (which looks like the Bootstrap styling to integrate better) and Fluent (based on Microsoft Fluent UI). You can easily customize any of out-of-the-box themes with a few lines of CSS, or create new theme to match your colors and branding by using the Telerik SASS ThemeBuilder application.
See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.
Try Telerik UI for Blazor with dedicated technical support.