This sample demonstrates the frozen columns feature of the Tree Grid. Scroll the movable content horizontally to view the frozen columns with the content.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority | Approved |
|---|---|---|---|---|---|---|---|
| 1 | Planning | 03/02/2017 | 07/02/2017 | 5 | 100 | Normal | false |
| 2 | Plan timeline | 03/02/2017 | 07/02/2017 | 5 | 100 | Normal | false |
| 3 | Plan budget | 03/02/2017 | 07/02/2017 | 5 | 100 | Low | true |
| 4 | Allocate resources | 03/02/2017 | 07/02/2017 | 5 | 100 | Critical | false |
| 5 | Planning complete | 07/02/2017 | 07/02/2017 | 0 | 0 | Low | true |
| 6 | Design | 10/02/2017 | 14/02/2017 | 3 | 86 | High | false |
| 7 | Software Specification | 10/02/2017 | 12/02/2017 | 3 | 60 | Normal | false |
| 8 | Develop prototype | 10/02/2017 | 12/02/2017 | 3 | 100 | Critical | false |
| 9 | Get approval from customer | 13/02/2017 | 14/02/2017 | 2 | 100 | Low | true |
| 10 | Design Documentation | 13/02/2017 | 14/02/2017 | 2 | 100 | High | true |
| 11 | Design complete | 14/02/2017 | 14/02/2017 | 0 | 0 | Normal | true |
| 12 | Implementation Phase | 17/02/2017 | 27/02/2017 | 11 | 66 | Normal | false |
| 13 | Phase 1 | 17/02/2017 | 27/02/2017 | 11 | 50 | High | false |
| 14 | Implementation Module 1 | 17/02/2017 | 27/02/2017 | 11 | 10 | Normal | false |
| 15 | Development Task 1 | 17/02/2017 | 19/02/2017 | 3 | 50 | High | false |
| 16 | Development Task 2 | 17/02/2017 | 19/02/2017 | 3 | 50 | Low | true |
| 17 | Testing | 20/02/2017 | 21/02/2017 | 2 | 0 | Normal | true |
| 18 | Bug fix | 24/02/2017 | 25/02/2017 | 2 | 0 | Critical | false |
| 19 | Customer review meeting | 26/02/2017 | 27/02/2017 | 2 | 0 | High | false |
| 20 | Phase 1 complete | 27/02/2017 | 27/02/2017 | 0 | 50 | Low | true |
| 21 | Phase 2 | 17/02/2017 | 28/02/2017 | 12 | 60 | High | false |
| 22 | Implementation Module 2 | 17/02/2017 | 28/02/2017 | 12 | 90 | Critical | false |
| 23 | Development Task 1 | 17/02/2017 | 20/02/2017 | 4 | 50 | Normal | true |
| 24 | Development Task 2 | 17/02/2017 | 20/02/2017 | 4 | 50 | Critical | true |
| 25 | Testing | 21/02/2017 | 24/02/2017 | 2 | 0 | High | false |
| 26 | Bug fix | 25/02/2017 | 26/02/2017 | 2 | 0 | Low | false |
| 27 | Customer review meeting | 27/02/2017 | 28/02/2017 | 2 | 0 | Critical | true |
| 28 | Phase 2 complete | 28/02/2017 | 28/02/2017 | 0 | 50 | Normal | false |
| 29 | Phase 3 | 17/02/2017 | 27/02/2017 | 11 | 30 | Normal | false |
| 30 | Implementation Module 3 | 17/02/2017 | 27/02/2017 | 11 | 60 | High | false |
| 31 | Development Task 1 | 17/02/2017 | 19/02/2017 | 3 | 50 | Low | true |
| 32 | Development Task 2 | 17/02/2017 | 19/02/2017 | 3 | 50 | Normal | false |
| 33 | Testing | 20/02/2017 | 21/02/2017 | 2 | 0 | Critical | true |
| 34 | Bug fix | 24/02/2017 | 25/02/2017 | 2 | 0 | High | false |
| 35 | Customer review meeting | 26/02/2017 | 27/02/2017 | 2 | 0 | Normal | true |
| 36 | Phase 3 complete | 27/02/2017 | 27/02/2017 | 0 | 50 | Critical | false |
The freezing feature enables the user to freeze certain columns to scroll remaining movable content. This can be achieved by setting frozenColumns property. In this demo sample, the first column is set to frozen by using the frozenColumns properties. Injecting Module: Tree Grid features are segregated into individual feature-wise modules. To use frozen columns feature, we need to inject Freeze module using the TreeGrid.Inject(Freeze) method.