TreeView - Manual Filtering

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.