You can get access to Gantt and its elements via keys or keys' combinations. This article will give you all the necessary information on the peculiarities of keyboard navigation with Gantt, including focus behavior, usage of ready shortcuts and creation of custom ones.
In order to use keyboard navigation in the Gantt chart, you need to enable the keyboard_navigation plugin using the gantt.plugins method.
gantt.plugins({
keyboard_navigation: true
});
The API of the gantt.ext.keyboardNavigation object is given in the article Keyboard Navigation Extension.
There are two variants of keyboard navigation available:
To enable it, set the keyboard_navigation property to true.
To use this type of navigation, set the keyboard_navigation_cells property to true.
When the Tab key is pressed, Gantt gets focus the same as any usual element. After that to navigate Gantt, you can use the arrow keys and other ones.
When the Tab key is pressed for the second time, the focus leaves Gantt and is moved to some other place on the page.
When a modal window (a lightbox, a confirm window) opens, the focus moves from Gantt to this window and navigation happens inside of it as in a simple form. When the window is closed, focus goes back to Gantt.
To return focus back to Gantt, you need to use the focus method. When Gantt gets focus again, it places the focus on the active element inside, or on the first row, or on the latest selected element.
The default navigation actions in a modal window are as follows:
If the focus is set on some button of the form, pressing Space or Enter will call pressing the button under focus and not the action.
When you specify focus on a grid cell/row and then click on a custom HTML element inside the Gantt, the focus will be returned to the grid cell/row.
From v7.1.13, you may add the 'no_keyboard_navigation' class to the custom element in order that the focus not to be restored on the grid cell/row.
An action called on a key click depends on the context. It means that different actions can be attached to different elements (scopes). There are the following context elements (scopes) in the Gantt chart:
If one and the same shortcut is attached to several scopes, the more specific shortcut will trigger. It means that if the same shortcut is attached to Gantt and to its element, the shortcut attached to an element will be called rather than the shortcut attached to the whole Gantt.
To create a new keyboard shortcut, you need to use the addShortcut method and pass three parameters to it:
gantt.addShortcut("shift+w", function(e){
var task = gantt.locate(e);
if(task)
gantt.showQuickInfo(task)
},"taskRow");
To remove a shortcut from the scope, you need to use the removeShortcut method. The method takes two parameters:
gantt.removeShortcut("shift+w","taskRow");
You can get the handler of the keyboard shorcut with the help of the method getShortcutHandler. It takes two parameters:
var shortcut_handler = gantt.getShortcutHandler("shift+w","taskRow");
The method returns a function, which presents the handler of the shortcut call.
A keyboard shortcut can consist of the following keys or key combinations:
There can be several key combinations for one action. In this case, all the combinations are listed with comma delimiter: "ctrl+a, ctrl+space".
There is a set of ready shortcuts that you can use to navigate the Gantt chart:
Related sample: Keyboard Navigation
You can find an example of how to implement the ability to copy/paste tasks via the Ctrl+C/Ctrl+V combinations in the related article.
Related sample: Keyboard Navigation - navigate cells
Starting from the version 4.2, the Gantt chart provides a possibility to scroll the timeline horizontally by using the following combination:
-> Shift key + mouse wheel movement.
From version 6.3 you can either set the Alt or Meta key in the combination with mouse wheel instead of default Shift key via the horizontal_scroll_key property:
gantt.config.horizontal_scroll_key = "altKey";
or disable the horizontal scroll by setting the horizontal_scroll_key property to false:
gantt.config.horizontal_scroll_key = false;