Example of Row Height in ASP.NET MVC Tree Grid Control
This sample demonstrates the row height feature of the Tree Grid. In this demo, the row height for all the Tree Grid rows can be changed as 20px, 40px and 60px through ToolBar button click.
Task ID | Task Name | Start Date | End Date | Duration | Progress |
|---|---|---|---|---|---|
| 1 | Planning | 6/7/2016 | 8/25/2021 | 5 | 100 |
| 2 | Plan timeline | 6/7/2016 | 8/25/2021 | 5 | 100 |
| 3 | Plan budget | 6/7/2016 | 8/25/2021 | 5 | 100 |
| 4 | Allocate resources | 6/7/2016 | 8/25/2021 | 5 | 100 |
| 5 | Planning complete | 8/25/2021 | 8/25/2021 | 3 | 25 |
| 6 | Design | 8/25/2021 | 6/27/2024 | 3 | 86 |
| 7 | Software Specification | 8/25/2021 | 6/27/2024 | 3 | 60 |
| 8 | Develop prototype | 8/25/2021 | 6/27/2024 | 3 | 100 |
| 9 | Get approval from customer | 6/27/2024 | 6/27/2024 | 2 | 100 |
| 10 | Design complete | 6/27/2024 | 6/27/2024 | 3 | 25 |
| 11 | Implementation Phase | 2/17/2017 | 2/17/2017 | 11 | 25 |
| 12 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 25 |
| 13 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 25 |
| 14 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 |
| 15 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 |
| 16 | Testing | 2/20/2017 | 2/21/2017 | 2 | 25 |
| 17 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 25 |
| 18 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 25 |
| 19 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 2 | 25 |
| 20 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 25 |
| 21 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 25 |
| 22 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 |
| 23 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 |
| 24 | Testing | 2/21/2017 | 2/24/2017 | 2 | 25 |
| 25 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 25 |
| 26 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 25 |
| 27 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 2 | 25 |
| 28 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 25 |
| 29 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 25 |
| 30 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 |
| 31 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 |
| 32 | Testing | 2/20/2017 | 2/21/2017 | 2 | 25 |
| 33 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 25 |
| 34 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 25 |
| 35 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 2 | 25 |
Tree Grid has provide an option to customize the row height by using RowHeight property of Tree Grid.
In this sample, we have enabled an option in Toolbar to customize the row height of Tree Grid to 20px, 40px and 60px.