Blazor Tree Grid Example - Excel like Filter
This example shows how to filter Tree Grid columns using the Excel-like 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 |
| 14 | Implementation module 1 | 2/26/2021 | 7:30 AM | 11 | Started | Normal |
| 15 | Development task 1 | 6/18/2021 | 8:00 AM | 3 | In Progress | High |
| 16 | Development task 2 | 2/13/2021 | 9:30 AM | 3 | Closed | Low |
| 17 | Testing | 3/2/2021 | 9:30 AM | 2 | Closed | Normal |
| 18 | Bug fix | 3/4/2021 | 9:30 AM | 2 | Validated | Critical |
| 19 | Customer review meeting | 3/6/2021 | 10:00 AM | 2 | Open | High |
| 20 | Phase 1 complete | 4/27/2021 | 8:30 AM | 2 | Closed | Low |
| 21 | Phase 2 | 7/17/2021 | 7:30 AM | 12 | Open | High |
| 22 | Implementation module 2 | 1/17/2021 | 3:00 AM | 12 | In Progress | Critical |
| 23 | Development task 1 | 8/17/2021 | 3:30 AM | 4 | Closed | Normal |
| 24 | Development task 2 | 4/17/2021 | 4:00 AM | 4 | Closed | Critical |
| 25 | Testing | 1/21/2021 | 5:30 AM | 2 | Open | High |
| 26 | Bug fix | 3/25/2021 | 6:30 AM | 2 | Validated | Low |
| 27 | Customer review meeting | 7/27/2021 | 9:00 AM | 2 | In Progress | Critical |
| 28 | Phase 2 complete | 7/19/2021 | 9:45 AM | 2 | Open | Normal |
| 29 | Phase 3 | 7/17/2021 | 7:30 AM | 11 | In Progress | Normal |
| 30 | Implementation module 3 | 8/17/2021 | 1:30 AM | 11 | Validated | High |
| 31 | Development task 1 | 11/17/2021 | 2:00 AM | 3 | Closed | Low |
| 32 | Development task 2 | 12/17/2021 | 3:00 AM | 3 | Closed | Normal |
| 33 | Testing | 1/1/2021 | 3:30 PM | 2 | Closed | Critical |
| 34 | Bug fix | 1/24/2021 | 5:00 PM | 2 | Open | High |
| 35 | Customer review meeting | 12/26/2021 | 4:00 PM | 2 | In Progress | Normal |
| 36 | Phase 3 complete | 5/27/2021 | 8:00 PM | 2 | Open | Critical |
The Excel-like filter helps create complex filter criteria for a column by allowing users to select possible filter values from a checkbox list. Additionally, users can build complex filter criteria using advanced filter options such as Sorting, Clear filter, Sub menu, and more. It can be enabled by setting AllowFiltering property to true.
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 Excel-like filter type.
More information on the Excel-like filter can be found in this documentation section.