Blazor Tree Grid Example - Default Filtering
This sample demonstrates the default filterbar functionality in Tree Grid. Type a value in the filterbar and press enter to filter the particular column.
Task ID | Task Name | Start Date | Duration | Progress | Priority |
|---|---|---|---|---|---|
| 1 | Parent task 1 | 8/28/2022 | 34 | In Progress | Critical |
| 2 | Child task 1 | 8/29/2022 | 1 | Validated | Critical |
| 3 | Child task 2 | 8/30/2022 | 98 | Open | Low |
| 4 | Sub task 1 | 8/29/2022 | 67 | Closed | Normal |
| 5 | Sub task 2 | 8/30/2022 | 14 | Closed | Normal |
| 6 | Sub task 3 | 8/31/2022 | 67 | Closed | Normal |
| 7 | Parent task 2 | 8/29/2022 | 52 | Open | Low |
| 8 | Child task 3 | 8/29/2022 | 1 | Validated | Critical |
| 9 | Child task 4 | 8/30/2022 | 98 | Open | Low |
| 10 | Sub task 4 | 8/29/2022 | 67 | Closed | Normal |
| 11 | Sub task 5 | 8/30/2022 | 14 | Closed | Normal |
| 12 | Sub task 6 | 8/31/2022 | 67 | Closed | Normal |
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. Next to the header, a filter bar row will be rendered, allowing end-users to filter data by entering text into its cells.
Filterbar has the following two modes that specify how to begin filtering. It can be specified using Mode property of TreeGridFilterSettings
OnEnter- Enabled by default, filter will be initiated after pressing theEnterkey.Immediate- Filter will start after user ends typing. This uses a time delay of 1500ms to initiate filter after user stops typing. It can be overridden by using the TreeGridFilterSettings->ImmediateModeDelay property.
Tree Grid also provides support for following filtering modes with 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.
More information on filtering can be found in this documentation section.