Blazor Tree Grid Example - Toolbar Template
This sample shows how to render a custom item in toolbar. In this demo, 'Quick Filter' custom toolbar item is shown that, when clicked, filters the Task Name column in the Tree Grid.
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 |
By defining the toolbar as a collection of ItemModel, custom toolbar items can be added. By using the OnToolbarClick event, the actions for these customised toolbar items can be defined.
In this demo, the custom toolbar item 'Quick Filter' has been rendered, along with the predefined toolbar items 'ExpandAll' and 'CollapseAll'. When you click the 'Quick Filter' toolbar button, the filtering is applied to the Task Name column.
More information on the toolbar can be found in this documentation section.