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