ui-for-blazor-lp-pages-herobanner

Progress Telerik UI for Blazor

TreeView

  • Blazor TreeView Overview

    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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • TreeView Data Binding

    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.

    Example of binding TreeView to hierarchical data.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • TreeView Multiple Level Bindings

    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. 

  • Customizing TreeView Templates

    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.

  • TreeView Load Data on Demand

    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.

    Example of loading data on demand with Blazor TreeView.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • Blazor TreeView Node Click Event / SelectedItemsChanged Event

    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.

  • Blazor TreeView Selection of Nodes

    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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • TreeView Accessibility and Keyboard Navigation

    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.

    Example of Blazor TreeView built-in keyboard navigation.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • TreeView Events

    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.

    Example of handling user expand and collapse in TreeView.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText
  • Blazor TreeView Theming

    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.

    Telerik.Sitefinity.Libraries.Model.Image..AlternativeText

Next Steps

Launch demos

See Telerik UI for Blazor in action and check out how much it can do out-of-the-box.

Download free trial

Try Telerik UI for Blazor with dedicated technical support.