Blazor Tree Grid Example - Row Height
This sample demonstrates the row height feature of Tree Grid. In this demo, the row height for all the Grid rows can be changed to 20px, 40px, and 60px on ToolBar button click.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
|---|
| 1 | Planning | 3/2/2021 | 7/3/2021 | 5 | Open | Normal |
| 2 | Plan timeline | 3/4/2021 | 7/5/2021 | 5 | In Progress | Normal |
| 3 | Plan budget | 3/6/2021 | 7/7/2021 | 5 | Started | Low |
| 4 | Allocate resources | 3/8/2021 | 7/9/2021 | 5 | Open | Critical |
| 5 | Planning complete | 7/10/2021 | 7/11/2021 | 1 | Open | Low |
| 6 | Design | 10/12/2021 | 2/13/2021 | 3 | In Progress | High |
| 7 | Software specification | 10/14/2021 | 2/15/2021 | 3 | Started | Normal |
| 8 | Develop prototype | 10/16/2021 | 2/17/2021 | 3 | In Progress | Critical |
| 9 | Get approval from customer | 2/18/2021 | 2/19/2021 | 2 | In Progress | Low |
| 10 | Design complete | 2/20/2021 | 2/21/2021 | 1 | In Progress | Normal |
| 12 | Implementation phase | 2/22/2021 | 2/23/2021 | 11 | Started | Normal |
| 13 | Phase 1 | 2/24/2021 | 2/25/2021 | 11 | Open | High |
| 14 | Implementation module 1 | 2/26/2021 | 2/27/2021 | 11 | Started | Normal |
| 15 | Development task 1 | 6/18/2021 | 6/19/2021 | 3 | In Progress | High |
| 16 | Development task 2 | 2/13/2021 | 3/1/2021 | 3 | Closed | Low |
| 17 | Testing | 3/2/2021 | 3/3/2021 | 2 | Closed | Normal |
| 18 | Bug fix | 3/4/2021 | 3/5/2021 | 2 | Validated | Critical |
| 19 | Customer review meeting | 3/6/2021 | 3/7/2021 | 2 | Open | High |
| 20 | Phase 1 complete | 4/27/2021 | 7/27/2021 | 2 | Closed | Low |
| 21 | Phase 2 | 7/17/2021 | 9/28/2021 | 12 | Open | High |
| 22 | Implementation module 2 | 1/17/2021 | 2/28/2021 | 12 | In Progress | Critical |
| 23 | Development task 1 | 8/17/2021 | 9/20/2021 | 4 | Closed | Normal |
| 24 | Development task 2 | 4/17/2021 | 3/20/2021 | 4 | Closed | Critical |
| 25 | Testing | 1/21/2021 | 1/24/2021 | 2 | Open | High |
| 26 | Bug fix | 3/25/2021 | 8/26/2021 | 2 | Validated | Low |
| 27 | Customer review meeting | 7/27/2021 | 6/28/2021 | 2 | In Progress | Critical |
| 28 | Phase 2 complete | 7/19/2021 | 5/28/2021 | 2 | Open | Normal |
| 29 | Phase 3 | 7/17/2021 | 2/12/2021 | 11 | In Progress | Normal |
| 30 | Implementation module 3 | 8/17/2021 | 9/27/2021 | 11 | Validated | High |
| 31 | Development task 1 | 11/17/2021 | 12/19/2021 | 3 | Closed | Low |
| 32 | Development task 2 | 12/17/2021 | 2/19/2021 | 3 | Closed | Normal |
| 33 | Testing | 1/1/2021 | 7/21/2021 | 2 | Closed | Critical |
| 34 | Bug fix | 1/24/2021 | 1/25/2021 | 2 | Open | High |
| 35 | Customer review meeting | 12/26/2021 | 12/27/2021 | 2 | In Progress | Normal |
| 36 | Phase 3 complete | 5/27/2021 | 5/27/2021 | 2 | Open | Critical |
The RowHeight property in Tree Grid allows you to modify the height of the rows.
In this sample, the toolbar is enabled to set the row height of the Tree Grid to 20px, 40px, or 60px.
More information about the row height feature can be found in this documentation section.