New to Telerik UI for Blazor? Download Free 30-day trial

TreeView - Manual Filtering

  • Manual-filtering.razor
  • CategoryService.cs
  • CategoryDto.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming


Telerik UI for Blazor TreeView component displays data in a tree-like structure. It allows you to navigate through or select multiple nodes and their children. In some scenarios, that list of nodes can be long, and you may need to reduce it.

You can programmatically filter the available nodes to display a custom list to the user. Such functionality can help if you want to show only a specific set of items that the user can select from (or navigate through).

To create a manual/custom programmatic filter, you can add a TelerikTextBox input (or any other input) and handle its ValueChanged event. In the ValueChanged event handler, update the TreeView data based on the input value to reduce the TreeView nodes list.

The current demo showcases a Blazor TreeView with manual/custom filtering. The available data is a long list of categories and products. The component, however, will display only the categories and products that contain the TelerikTextBox input value.

Focus the input above the Blazor TreeView. Then, type a string value and see the presented list of nodes reduced to the nodes that contain that value. That is achieved by programmatically reducing the nodes list in the input ValueChanged event handler. The filtering condition in the list is entirely customizable.

This TreeView Manual Filtering example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.
An error has occurred. This application may no longer respond until reloaded.