Blazor Tree Grid Example - 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.
Task ID Press Alt Down to open filter Menu | Task Name Press Alt Down to open filter Menu | Start Date Press Alt Down to open filter Menu | Start Time Press Alt Down to open filter Menu | Duration Press Alt Down to open filter Menu | Progress Press Alt Down to open filter Menu | Priority Press Alt Down to open filter Menu |
|---|
| 1 | Planning | 3/2/2021 | 10:00 AM | 5 | Open | Normal |
| 2 | Plan timeline | 3/4/2021 | 11:30 AM | 5 | In Progress | Normal |
| 3 | Plan budget | 3/6/2021 | 12:00 PM | 5 | Started | Low |
| 4 | Allocate resources | 3/8/2021 | 1:30 PM | 5 | Open | Critical |
| 5 | Planning complete | 7/10/2021 | 2:00 PM | 1 | Open | Low |
| 6 | Design | 10/12/2021 | 4:00 PM | 3 | In Progress | High |
| 7 | Software specification | 10/14/2021 | 5:30 PM | 3 | Started | Normal |
| 8 | Develop prototype | 10/16/2021 | 6:00 PM | 3 | In Progress | Critical |
| 9 | Get approval from customer | 2/18/2021 | 7:30 PM | 2 | In Progress | Low |
| 10 | Design complete | 2/20/2021 | 8:00 PM | 1 | In Progress | Normal |
| 12 | Implementation phase | 2/22/2021 | 5:00 AM | 11 | Started | Normal |
| 13 | Phase 1 | 2/24/2021 | 6:00 AM | 11 | Open | High |
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.
FilterBarMenuExcel
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.