Blazor TreeView - Node Filtering (v22.1)

Our most recent update ships with a new filter option for the DevExpress Blazor TreeView control. As you would expect, this filter option allows you to locate information displayed in tree nodes with ease.

Integrate Filtering into Your Blazor-powered App

To display our Blazor TreeView's filter panel, you must first set the ShowFilterPanel option. Our Blazor TreeView component will display matching nodes (including parent nodes) when your end user enters filter values. You can use the control's FilterString property to specify filter criteria within code. Use the FilterMode property to control filter options. You can limit the display to matching nodes, nodes with parents, or force the control to display the entire tree branch once a filter has been applied.

<DxTreeView ShowFilterPanel="true" FilterString="York">
  @* ... *@
</DxTreeView>

Filter operations begin with three input symbols. Use the FilterMinLength property to increase or decrease the required symbols.

Custom Filter

You can integrate custom filter logic to better address your business needs. When creating a custom filter, you'll need to implement a Boolean function that defines whether the search string meets a user's filter criteria. The following example shows how your app can search for values separated by a comma:

<DxTreeView CustomFilter=@CustomFilter>
  @* ... *@
</DxTreeView>

static IEnumerable<string> SplitByComma(string value) => value
  .Split(',', StringSplitOptions.TrimEntries |
    StringSplitOptions.RemoveEmptyEntries);
bool CustomFilter(ITreeViewNodeInfo info) {
  return SplitByComma(info.FilterInfo.Value)
    .Any(word => info.Text.Contains(word,
      StringComparison.InvariantCultureIgnoreCase));
}

Refer to our GitHub repository for complete source code: Blazor TreeView - How to implement custom filter

Your Feedback Matters

Help us improve the capabilities of the DevExpress Blazor TreeView control. Please take a moment to answer the following questions:

Free DevExpress Products - Get Your Copy Today