Grids
Example of Column Chooser in ASP.NET Core Tree Grid Control
This sample demonstrates the Tree Grid column chooser feature. Click or tap the column chooser icon in the toolbar to open column chooser and you can select columns to hide/show from the checkbox list.
Task ID | Task Name | Start Date | End Date | Duration | Progress | Priority |
|---|---|---|---|---|---|---|
| 1 | Planning | 3/2/2017 | 7/2/2017 | 5 | 100 | Normal |
| 2 | Plan timeline | 3/2/2017 | 7/2/2017 | 5 | 100 | Normal |
| 3 | Plan budget | 3/2/2017 | 7/2/2017 | 5 | 100 | Low |
| 4 | Allocate resources | 3/2/2017 | 7/2/2017 | 5 | 100 | Critical |
| 5 | Planning complete | 7/2/2017 | 7/2/2017 | 1 | 1 | Low |
| 6 | Design | 10/2/2017 | 2/14/2017 | 3 | 86 | High |
| 7 | Software Specification | 10/2/2017 | 2/12/2017 | 3 | 60 | Normal |
| 8 | Develop prototype | 10/2/2017 | 2/12/2017 | 3 | 100 | Critical |
| 9 | Get approval from customer | 2/13/2017 | 2/14/2017 | 2 | 100 | Low |
| 10 | Design complete | 2/14/2017 | 2/14/2017 | 1 | 1 | Normal |
| 11 | Implementation Phase | 2/17/2017 | 2/17/2017 | 11 | 66 | Normal |
| 12 | Phase 1 | 2/17/2017 | 2/27/2017 | 11 | 50 | High |
| 13 | Implementation Module 1 | 2/17/2017 | 2/27/2017 | 11 | 10 | Normal |
| 14 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | High |
| 15 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low |
| 16 | Testing | 2/20/2017 | 2/21/2017 | 2 | 1 | Normal |
| 17 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 1 | Critical |
| 18 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 1 | High |
| 19 | Phase 1 complete | 2/27/2017 | 2/27/2017 | 2 | 50 | Low |
| 20 | Phase 2 | 2/17/2017 | 2/28/2017 | 12 | 60 | High |
| 21 | Implementation Module 2 | 2/17/2017 | 2/28/2017 | 12 | 90 | Critical |
| 22 | Development Task 1 | 2/17/2017 | 2/20/2017 | 4 | 50 | Normal |
| 23 | Development Task 2 | 2/17/2017 | 2/20/2017 | 4 | 50 | Critical |
| 24 | Testing | 2/21/2017 | 2/24/2017 | 2 | 1 | High |
| 25 | Bug fix | 2/25/2017 | 2/26/2017 | 2 | 1 | Low |
| 26 | Customer review meeting | 2/27/2017 | 2/28/2017 | 2 | 1 | Critical |
| 27 | Phase 2 complete | 2/28/2017 | 2/28/2017 | 2 | 50 | Normal |
| 28 | Phase 3 | 2/17/2017 | 2/27/2017 | 11 | 30 | Normal |
| 29 | Implementation Module 3 | 2/17/2017 | 2/27/2017 | 11 | 60 | High |
| 30 | Development Task 1 | 2/17/2017 | 2/19/2017 | 3 | 50 | Low |
| 31 | Development Task 2 | 2/17/2017 | 2/19/2017 | 3 | 50 | Normal |
| 32 | Testing | 2/20/2017 | 2/21/2017 | 2 | 1 | Critical |
| 33 | Bug fix | 2/24/2017 | 2/25/2017 | 2 | 1 | High |
| 34 | Customer review meeting | 2/26/2017 | 2/27/2017 | 2 | 1 | Normal |
| 35 | Phase 3 complete | 2/27/2017 | 2/27/2017 | 2 | 50 | Critical |
Choose Column
- Select All
- Task ID
- Start Date
- End Date
- Duration
- Progress
- Priority
The Tree Grid columns can be shown/hidden dynamically by using column chooser. To enable column chooser behavior, set
showColumnChooser
property as true. You can also prevent the display of a column in column chooser by setting
columns->showInColumnChooser as false in columns definition.
In this demo, when the user clicks or taps column chooser icon from the toolbar then the column chooser menu will open. User can show or hide the columns by changing the state of the checkbox.