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