Gantt Chart / Miscellaneous / Keyboard Navigation

Blazor Gantt Chart Example - Keyboard Navigation Support

Loading Syncfusion Blazor Server Demos…

This sample demonstrates keyboard navigation and accessibility support in the Blazor Gantt Chart. Every common interaction focusing cells, extending selections, editing tasks, and expanding or collapsing the hierarchy can be triggered through intuitive key combinations, enabling productivity without leaving the keyboard.

The shortcuts are grouped below by intent. Experiment with each sequence to explore how focus, selection, edit dialogs, and structural commands respond in real time.

  • FOCUS
    • Alt + J - Focuses on the first component of the sample.
    • Home - Moves the focus to the first cell of the focused row.
    • End - Moves the focus to the last cell of the focused row.
    • Ctrl + Home - Moves the focus to the first Cell of the first row in our GanttChart component.
    • Ctrl + End - Moves the focus to the last cell of the last row in our GanttChart component.
    • Down arrow - Moves the cell focus downward from the focused cell.
    • Up arrow - Moves the cell focus upward from the focused cell.
    • Left arrow - Moves the cell focus left side from the focused cell.
    • Right arrow - Moves the cell focus right side from the focused cell.
  • SELECTION
    • Shift + Down arrow - Extends the row/cell selection downwards from the selected row/cell.
    • Shift + Up arrow - Extends the row/cell selection upwards from the selected row/cell.
    • Shift + Left arrow - Extends the cell selection to the left side from the selected cell.
    • Shift + Right arrow - Extends the cell selection to the right side from the selected cell.
    • Up arrow - Moves the cell focus/row or cell selection upward.
    • Down arrow - Moves the cell focus/row or cell selection downward.
    • Right arrow - Moves the cell focus/row or cell selection right side.
    • Left arrow - Moves the cell focus/row or cell selection left side.
  • EDITING
    • Ctrl + Insert - Opens addRowDialog.
    • Ctrl + F2 - Opens editRowDialog.
    • Del - Deletes the currently selected record.
    • Insert - Adds a new row.
    • Enter - Saves the current form if the Mode is Normal or Dialog / Saves the current cell.
  • EXPANDCOLLAPSE
    • Ctrl + Down arrow - Expands all tasks.
    • Ctrl + Up arrow - Collapses all tasks.
    • Ctrl + Shift + Up arrow - Collapses the selected row.
    • Ctrl + Shift + Down arrow - Expands the selected row.

For further details, refer to the documentation.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE