Blazor Tree Grid Example - Events
Task ID Press Enter to sort | Task Name Press Enter to sort | Start Date Press Enter to sort | End Date Press Enter to sort | Duration (In Days) Press Enter to sort | Status Press Enter to sort |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | In Progress |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Closed |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Open |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Validated |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Open |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Closed |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Closed |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Closed |
Event Trace |
OnDataBound event called OnLoad event called |
This sample demonstrates the Tree Grid event model with a live Event Trace panel that captures lifecycle, action, and interaction events to support customization and troubleshooting.
Wire events by adding the TreeGridEvents component and handling lifecycle/user interaction events. The Event Trace panel updates in real time during paging, sorting, reordering, editing, row expand/collapse, and selection. These features are enabled by setting AllowPaging, AllowSorting, AllowReordering, and AllowSelection to true.
More information on events can be found in the documentation section.