Example of keyboard-interactions-functional in React Gantt

/
/
Keyboard Interaction

This demo showcases the keyboard shortcuts applicable on Gantt and also lists out in below descriptions, and this demo also explains how those applicable shortcuts interacts with Gantt actions.

More Details...

Loading....
Description

All the Gantt actions can be controlled via keyboard keys and are availed using the allowKeyboard property, which is set to true by default. The applicable key combinations and their relative functionalities are listed below.

Keys Description
Alt + J Focus Gantt Component
Tab / Shift + Tab Focus the next or previous element
Home First Row Selection
End Last Row Selection
DownArrow Move Row Selection Down
UpArrow Move Row Selection Up
LeftArrow Move Cell Selection Left
RightArrow Move Cell Selection Right
Ctrl + UpArrow Collapse All
Ctrl + DownArrow Expand All
Ctrl + Shift + UpArrow Collapse Row
Ctrl + Shift + DownArrow Expand Row
Enter Save Request
Esc Cancel Request
Insert Add Record
Ctrl + Insert Add Record By Dialog
Ctrl + F2 Edit Record By Dialog
Delete Delete Row
Ctrl + Shift + F Focus Search Textbox
Shift + F5 Focus Task
Shift + DownArrow Move Cell Selection Down
Shift + UpArrow Move Cell Selection Up
Shift + LeftArrow Move Cell Selection Left
Shift + RightArrow Move Cell Selection Right
Ctrl + Z Undo Last Action
Ctrl + Y Redo Last Action

Gantt component features are segregated into individual feature-wise modules. To use a selection, toolbar, edit, filter and marker features, we need to inject the Selection, Toolbar, Edit, Filter and DayMarkers into the Inject Services section.


More information on the Essential® React Gantt Chart can be found in this documentation section.