Filter Data in Blazor TreeList

Dec 12, 2025
2 minutes to read

The DevExpress Blazor TreeList allows you to filter data in UI and in code.

You can use the FilterTreeMode property to specify how the component displays nodes that meet filter criteria with all available filter options:

EntireBranch

The TreeList component displays a node that meets the filter criteria and all its parent and child nodes, even if they do not meet that criteria.

Entire Branch Filter Tree Mode

Nodes

The TreeList component ignores parent-child relationships and displays all nodes that meet the filter criteria at one level. This mode improves overall performance when the TreeList is bound to a large remote data source.

Nodes Filter Tree Mode

ParentBranch

The TreeList component displays a node that meets the filter criteria and all its parent nodes, even if they do not meet that criteria.

Parent Branch Filter Tree Mode

An Excel-inspired drop-down filter displays unique column values as a list or hierarchy, includes a search box, and the Select All option.

Read Tutorial: Column Filter Menu Run Demo: Column Filter Menu

Filter Row UI

The filter row displays in-place editors for all data columns. When a user types into an editor, the TreeList creates a filter condition based on the editor value and applies this condition to the column.

Read Tutorial: Filter Row Run Demo: TreeList - Filter Row

Blazor TreeList Filter Row

The filter panel displays the current filter condition and allows users to deactivate/clear it. Users can click this filter condition to open the filter builder dialog. In the dialog, they can edit and combine filter criteria applied to TreeList columns.

Read Tutorial: Filter Panel & Filter Builder Run Demo: Filter Panel Run Demo: Filter Builder Customization

DevExpress Blazor TreeList - Filter Panel and Filter Builder Dialog