New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Keyboard Support

RadGantt keyboard navigation functionality allows for navigation and manipulation of RadGantt using the keyboard. The KeyboardNavigation is enabled when the KeyboardNavigationSettings are set.

The KeyboardNavigationSettings exposes two properties to configure the keyboard combination that sets focus to the control:

  • FocusKey An upper-case letter or number.
  • CommandKey Ctrl , Alt , Shift , or any combination of them.

Use Alt + G to place the focus on the RadGantt in the demo above.

Actions applied on Gantt's timeline

  • Delete delete currently selected task or dependency.

Actions applied on Gantt's treelist header

  • Enter sort by currently highlighted header.

Actions applied on Gantt's treelist data table

  • Arrow keys navigate through the cells.
  • Enter open cell editor.
  • Esc close cell editor and disregard changes.
  • Space select currently highlighted cell's row.
  • Delete delete currently selected task.
  • 1-3 move between the available views.
  • Alt + Left Arrow/Right Arrow scroll timeline.
  • Ctrl + Left Arrow/Right Arrow expand/collapse summary row.

Actions applied on "Add Task" action dropdown

  • Up Arrow/Down Arrow highlight previous/next item.
  • Enter select highlighted item.
  • Esc close the dropdown.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.GanttExamples.AccessibilityAndInternationalization.KeyboardSupport.DefaultCS"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container no-bg">
        <telerik:RadGantt RenderMode="Lightweight" ID="RadGantt1" Height="450px" SelectedView="MonthView" runat="server"
            DisplayDeleteConfirmation="false" ListWidth="50%">
            <KeyboardNavigationSettings FocusKey="G" CommandKey="Alt" />
        </telerik:RadGantt>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance