Keyboard Navigation

The keyboard navigation of the Gantt is always available.

The toolbar of the Gantt supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
F10 Focuses the toolbar.
Tab Focuses the next toolbar item.
Shift+Tab Focuses the previous toolbar item.
Enter or Space Activates the toolbar item.
Right Arrow Focuses the next view when the focus is over the views container.
Left Arrow Focuses the previous view when the focus is over the views container.

The timeline of the Gantt supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Delete Deletes the currently selected task or dependency.

The tree-list header of the Gantt supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Enter Sorts by column.

The tree-list data table of the Gantt supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Arrow Keys Navigate over the cells.
Enter Opens the cell editor.
Esc Closes the cell editor.
Space Selects the row of the currently highlighted cell.
Delete Deletes the currently selected task.
1, 2, or 3 Switch between the available views.
Alt+Arrow Keys Scrolls the timeline.
Ctrl+Arrow Keys Expands or collapses the summary row.

The Add Task drop-down list of the Gantt supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Highlights the previous item.
Down Arrow Highlights the next item.
Enter Selects the highlighted item.
Esc Closes the drop-down list.
<div id="vueapp" class="vue-app">
    <kendo-gantt id="gantt"
                :height="'500'"
                :editable-create="'false'"
                :data-source="datasource"
                :navigatable="true"
                :dependencies="dependencydatasource">
        <kendo-gantt-view :type="'day'"></kendo-gantt-view>
        <kendo-gantt-view :type="'week'" :selected="true"></kendo-gantt-view>
        <kendo-gantt-view :type="'month'"></kendo-gantt-view>
    </kendo-gantt>
</div>
Vue.use(GanttInstaller);
new Vue({
    el: '#vueapp',
    data: {
        datasource: [{
            id: 0,
            orderId: 0,
            parentId: null,
            title: "Main Project",
            summary: true,
            expanded: true,
            percentComplete: 0.3,
            start: new Date("2014/6/17 9:00"),
            end: new Date("2014/7/01 11:00")
        },
        {
            id: 1,
            orderId: 1,
            parentId: 0,
            title: "Task1",
            percentComplete: 0.47,
            start: new Date("2014/6/17 11:00"),
            end: new Date("2014/6/20 14:00")
        },
            {
            id: 2,
            orderId: 2,
            parentId: 0,
            title: "Task2",
            percentComplete: 0.5,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        },
        {
            id: 3,
            orderId: 3,
            parentId: null,
            title: "Second Project",
            summary: true,
            expanded: true,
            percentComplete: 0.2,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        },
        {
            id: 4,
            orderId: 4,
            parentId: 3,
            title: "Task1",
            percentComplete: 0.5,
            start: new Date("2014/6/19 11:00"),
            end: new Date("2014/6/22 14:00")
        }],
        dependencydatasource: [{
            predecessorId: 1,
            successorId: 2,
            type: 1
        }]
      }

    })

In this article