Blazor Tree Grid Example - Menu Filter

Tree Grid / Filtering / Menu Filter

This example shows how to filter Tree Grid columns using the menu filter dialog. Clicking or tapping the filter icon on the column header opens the filter dialog for that column.

Loading Syncfusion Blazor Server Demos…

The filtering feature allows the user to view a subset of the records based on the filter criteria. Set the AllowFiltering property to true to enable it.

Tree Grid supports the following filter types for various filter UI, which can be set using the Type property of TreeGridFilterSettings.

  • FilterBar
  • Menu
  • Excel

Tree Grid also provides support for the following filtering modes with the HierarchyMode property of TreeGridFilterSettings.

  • Parent - This is the default filter hierarchy mode in Tree Grid. The filtered records appear alongside their parent records. If none of the filtered records have a parent record, only the filtered record itself is displayed.
  • Child - The filtered records are shown alongside their child records. If the filtered records have no child records, only the filtered records are displayed.
  • Both - The filtered records are shown alongside their parent and child records. If there are no parent or child records in the filtered records, only the filtered records will be displayed.
  • None - Only the actual filtered records are displayed.

In this demo, Parent hierarchy mode is enabled with menu filter type.

More information on menu filter can be found in this documentation section.

Transform your Blazor web apps today with Syncfusion® Blazor components
100+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE