This demo showcases the keyboard shortcuts applicable on Tree Grid and also lists out in below description, how those applicable shortcuts interacts with Tree Grid actions.
Task ID | Task Name | Start Date | Duration | Progress |
|---|---|---|---|---|
| 1 | Planning | 2/3/2017 | 5 | 100 |
| 2 | Plan timeline | 2/3/2017 | 5 | 100 |
| 3 | Plan budget | 2/3/2017 | 5 | 100 |
| 4 | Allocate resources | 2/3/2017 | 5 | 100 |
| 5 | Planning complete | 2/7/2017 | 0 | 0 |
| 6 | Design | 2/10/2017 | 3 | 86 |
| 7 | Software Specification | 2/10/2017 | 3 | 60 |
| 8 | Develop prototype | 2/10/2017 | 3 | 100 |
| 9 | Get approval from customer | 2/13/2017 | 2 | 100 |
| 10 | Design Documentation | 2/13/2017 | 2 | 100 |
| 11 | Design complete | 2/14/2017 | 0 | 0 |
| 12 | Implementation Phase | 2/17/2017 | 11 | 66 |
| 13 | Phase 1 | 2/17/2017 | 11 | 50 |
| 14 | Implementation Module 1 | 2/17/2017 | 11 | 10 |
| 15 | Development Task 1 | 2/17/2017 | 3 | 50 |
| 16 | Development Task 2 | 2/17/2017 | 3 | 50 |
| 17 | Testing | 2/20/2017 | 2 | 0 |
| 18 | Bug fix | 2/24/2017 | 2 | 0 |
| 19 | Customer review meeting | 2/26/2017 | 2 | 0 |
| 20 | Phase 1 complete | 2/27/2017 | 0 | 50 |
| 21 | Phase 2 | 2/17/2017 | 12 | 60 |
| 22 | Implementation Module 2 | 2/17/2017 | 12 | 90 |
| 23 | Development Task 1 | 2/17/2017 | 4 | 50 |
| 24 | Development Task 2 | 2/17/2017 | 4 | 50 |
| 25 | Testing | 2/21/2017 | 2 | 0 |
| 26 | Bug fix | 2/25/2017 | 2 | 0 |
| 27 | Customer review meeting | 2/27/2017 | 2 | 0 |
| 28 | Phase 2 complete | 2/28/2017 | 0 | 50 |
| 29 | Phase 3 | 2/17/2017 | 11 | 30 |
| 30 | Implementation Module 3 | 2/17/2017 | 11 | 60 |
| 31 | Development Task 1 | 2/17/2017 | 3 | 50 |
| 32 | Development Task 2 | 2/17/2017 | 3 | 50 |
| 33 | Testing | 2/20/2017 | 2 | 0 |
| 34 | Bug fix | 2/24/2017 | 2 | 0 |
| 35 | Customer review meeting | 2/26/2017 | 2 | 0 |
| 36 | Phase 3 complete | 2/27/2017 | 0 | 50 |
| Keys | Description |
| F2 | Row edit |
| Enter | Save request |
| Delete | Delete row |
| Ctrl + Shift + UpArrow | Collapse Child Grid |
| Ctrl + Shift + DownArrow | Expand Child Grid |
| Ctrl + UpArrow | Collapse All |
| Ctrl + DownArrow | Expand All |
| Ctrl + Home | First row selection |
| Ctrl + End | Last row selection |
| Home | First cell selection |
| End | Last cell selection |
| Up Arrow | Move row selection up |
| Down Arrow | Move row selection down |
| Right Arrow | Move Cell selection right |
| Left Arrow | Move Cell selection left |
| Shift + Down/Up | Multiple row Selection |
| Alt + j | Focus Tree Grid element |
All the Tree Grid actions can be controlled via keyboard keys and is availed by using allowKeyboardInteraction
property which is set to true by default. The applicable key combinations and its relative functionalities are listed below,
| Keys | Description |
Ctrl + Down Arrow | ExpandAll |
Ctrl + Up Arrow | CollapseAll |
F2 | Edit |
ESC | Cancel |
Enter | Save |
Insert | Add |
Delete | Delete |
Ctrl + Home | First row selection |
Ctrl + End | Last row selection |
Home | First cell selection |
End | Last cell selection |
Up Arrow | Move row selection up |
Down Arrow | Move row selection down |
Up Arrow | Move Cell selection up |
Down Arrow | Move Cell selection down |
Right Arrow | Move Cell selection right |
Left Arrow | Move Cell selection left |
Shift + Down/Up | Multiple row Selection |
Shift + Right/Left/Down/Up | Multiple Cell Selection |
Ctrl + Shift + Up Arrow | Collapse selected parent row |
Ctrl + Shift + Down Arrow | Expand selected parent row |
Alt + j | Focus Tree Grid element |
Tab | Go to next cell for editing |
Shift + Tab | Go to previous cell for editing |
PageDown | Go to Next page |
PageUp | Go to Previous page |
Ctrl + Alt + PageUp | Go to First page |
Ctrl + Alt + PageDown | Go to Last page |
Alt + PageUp | Go to Next pager |
Alt + PageDown | Go to last pager |
More information on the gridLines configuration can be found in this documentation section.