Progress Telerik UI for Blazor
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 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.
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.
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 OnItemClick event is fired as a response to a user clicking on an item in the TreeView and provides a way for you to handle this interaction to do meaningful work – for example you might want to show detailed information about the clicked node in a separate component. Similarly to the OnItemClick event, SelectedItemsChanged is triggered when the user modifies the selection in the TreeView. 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) and Bootstrap (which looks like the Bootstrap styling to integrate better). 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.