Example of Frozen Columns in ASP.NET MVC Tree Grid Control
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 | 6/7/2016 | 8/25/2021 | 5 | 100 | Normal | false |
| 2 | Plan timeline | 6/7/2016 | 8/25/2021 | 5 | 100 | Normal | false |
| 3 | Plan budget | 6/7/2016 | 8/25/2021 | 5 | 100 | Critical | true |
| 4 | Allocate resources | 6/7/2016 | 8/25/2021 | 5 | 100 | Critical | false |
| 5 | Planning complete | 8/25/2021 | 8/25/2021 | 3 | 25 | Low | true |
| 6 | Design | 8/25/2021 | 6/27/2024 | 3 | 86 | High | false |
| 7 | Software Specification | 8/25/2021 | 6/27/2024 | 3 | 60 | Normal | false |
| 8 | Develop prototype | 8/25/2021 | 6/27/2024 | 3 | 100 | Critical | false |
| 9 | Get approval from customer | 6/27/2024 | 6/27/2024 | 2 | 100 | Critical | true |
| 10 | Design complete | 6/27/2024 | 6/27/2024 | 3 | 25 | Normal | true |
| 11 | Implementation Phase | 2/17/2017 | 2/17/2017 | 11 | 25 | Normal | false |
| 12 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 25 | High | false |
| 13 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 25 | Normal | false |
| 14 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | High | false |
| 15 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | true |
| 16 | Testing | 2/20/2017 | 2/21/2017 | 2 | 25 | Normal | true |
| 17 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 25 | Critical | false |
| 18 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 25 | High | false |
| 19 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 2 | 25 | Low | true |
| 20 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 25 | High | false |
| 21 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 25 | Critical | false |
| 22 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 | Normal | true |
| 23 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 | Critical | true |
| 24 | Testing | 2/21/2017 | 2/24/2017 | 2 | 25 | High | false |
| 25 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 25 | Low | false |
| 26 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 25 | Critical | true |
| 27 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 2 | 25 | Normal | false |
| 28 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 25 | Normal | false |
| 29 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 25 | High | false |
| 30 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low | true |
| 31 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Normal | false |
| 32 | Testing | 2/20/2017 | 2/21/2017 | 2 | 25 | Critical | true |
| 33 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 25 | High | false |
| 34 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 25 | Normal | true |
| 35 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 2 | 25 | 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 two columns is set to frozen by using the
FrozenColumns
opens in a new tab
properties.