Example of Keyboard Interactions in React Gantt Component


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...


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.

Gantt component features are segregated into individual feature-wise modules. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method.To use a toolbar, inject the Toolbar module using the Gantt.Inject(Toolbar) method.To use a edit, inject the Edit module using the Gantt.Inject(Edit) method.To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method.

Keys Description
Home First Row Selection
End Last Row Selection
DownArrow Move Row Selection Down
UpArrow Move Row Selection Up
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