Blazor Tree Grid Example - Paging
This sample shows the paging feature in Tree Grid. Click the numeric items on the pager to navigate to another page in the tree grid. You can also change the page size on pager by using the dropdown list.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
|---|
| 1 | Parent task 1 | 8/28/2022 | 9/15/2027 | 34 | In Progress | Critical |
| 2 | Child task 1 | 8/29/2022 | 7/1/2025 | 1 | Validated | Critical |
| 3 | Child task 2 | 8/30/2022 | 7/2/2025 | 98 | Open | Low |
| 4 | Sub task 1 | 8/29/2022 | 6/29/2024 | 67 | Closed | Normal |
| 5 | Sub task 2 | 8/30/2022 | 6/30/2024 | 14 | Closed | Normal |
| 6 | Sub task 3 | 8/31/2022 | 7/1/2024 | 67 | Closed | Normal |
| 7 | Parent task 2 | 8/29/2022 | 9/16/2027 | 52 | Open | Low |
| 8 | Child task 3 | 8/29/2022 | 7/1/2025 | 1 | Validated | Critical |
| 9 | Child task 4 | 8/30/2022 | 7/2/2025 | 98 | Open | Low |
| 10 | Sub task 4 | 8/29/2022 | 6/29/2024 | 67 | Closed | Normal |
| 11 | Sub task 5 | 8/30/2022 | 6/30/2024 | 14 | Closed | Normal |
| 12 | Sub task 6 | 8/31/2022 | 7/1/2024 | 67 | Closed | Normal |
Items per page
Paging allows you to display the contents of the Tree Grid in page segments. By default, paging is disabled. To enable paging, set the AllowPaging property to true. By default, Root mode is set for the PageSizeMode, and the TreeGridPageSettings.PageSizes property enables a dropdown in the pager, which allows you to change the number of records in the Tree Grid dynamically.
More information on the paging feature can be found in this documentation section.