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

Keyboard Support

  • Products
    • UI for ASP.NET Ajax
      • Overview
      • Included Controls
      • Why Choose
      • What's New
      • System Requirements
      • Online Demos
    • UI for WinForms
    • Reporting
    • Test Studio
  • Purchase
    • Buy Now
    • License Agreement
    • Policies
    • Upgrades
    • Other ways to Buy
    • Resellers
    • FAQ
    • Contact Sales
  • Support
    • Support Center
    • Knowledge Base
    • Demos
    • Tutorials
    • Documentation
    • Code Library
    • Forums
  • Community
    • White Papers
    • Learning Resources
    • Blogs
    • Telerik Labs
    • Client Spotlights
    • Telerik Points
    • MVP Program
    • Events
  • Corporate
    • Corporate Info
    • Press Center
    • Customers
    • Careers
    • Contact Us
  • Demo Configurator
  • Command keyAlt

Keyboard Support

Keyboard support is comprised of command key, focus key, and keyboard navigation.

RadNavigation will seamlessly switch between mouse and keyboard navigation.

In order to configure keyboard support with RadNavigation its KeyboardNaviagationSettings should be set:

        <telerik:RadNavigation ID="RadNavigation1" runat="server" >
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
            <Nodes>
                <telerik:NavigationNode Text="UI for ASP.NET Ajax" >
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="UI for WinForms" >
                </telerik:NavigationNode>
            </Nodes>
        </telerik:RadNavigation>

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 two of these keys.

When there are multiple Navigation controls on a given page, each of them may have a different activation combination.

In this particular example, the [CommandKey] and the [FocusKey] can be customized in the Demo Configurator.

Note: It is recommended to avoid [CommandKey] + [FocusKey] combinations matching keyboard shortcuts used in the browsers. If the combination coincides with an existing shortcut the control may be unable to focus.

Pressing [CommandKey] + [FocusKey]) puts the focus on the first Navigation node allowing you to navigate the nodes:

  • Pressing Left or Right Arrow keys will navigate through the nodes.
  • Pressing Down or Up Arrow keys will expand submenus with child nodes.
  • Pressing Enter or Spacer keys will select the focused node and expand its submenu
  • Pressing Esc will close the expanded submenu
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Title="" Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Navigation.AccessibilityandInternationalization.Keyboard.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 size-narrow">
        <telerik:RadNavigation ID="RadNavigation1" runat="server" TabIndex="1">
            <Nodes>
                <telerik:NavigationNode Text="Products">
                    <Nodes>
                        <telerik:NavigationNode Text="UI for ASP.NET Ajax">
                            <Nodes>
                                <telerik:NavigationNode Text="Overview"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Included Controls"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Why Choose"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="What's New"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="System Requirements"></telerik:NavigationNode>
                                <telerik:NavigationNode Text="Online Demos"></telerik:NavigationNode>
                            </Nodes>
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="UI for WinForms">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Reporting">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Test Studio">
                        </telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Purchase">
                    <Nodes>
                        <telerik:NavigationNode Text="Buy Now">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="License Agreement">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Policies">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Upgrades">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Other ways to Buy">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Resellers">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="FAQ">
                        </telerik:NavigationNode>
                        <telerik:NavigationNode Text="Contact Sales">
                        </telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Support">
                    <Nodes>
                        <telerik:NavigationNode Text="Support Center"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Knowledge Base"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Demos"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Tutorials"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Documentation"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Code Library"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Forums"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Community">
                    <Nodes>
                        <telerik:NavigationNode Text="White Papers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Learning Resources"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Blogs"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Telerik Labs"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Client Spotlights"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Telerik Points"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="MVP Program"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Events"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
                <telerik:NavigationNode Text="Corporate">
                    <Nodes>
                        <telerik:NavigationNode Text="Corporate Info"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Press Center"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Customers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Careers"></telerik:NavigationNode>
                        <telerik:NavigationNode Text="Contact Us"></telerik:NavigationNode>
                    </Nodes>
                </telerik:NavigationNode>
            </Nodes>
        </telerik:RadNavigation>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadNavigation1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script>
            function validateFocusKey(source, arguments) {
                var maskedTextBox = $find("<%= RadMaskedTextBoxFocusKey.ClientID %>");
                var textBoxValue = maskedTextBox.get_textBoxValue().trim();

                if (textBoxValue.length != 1) {
                    arguments.IsValid = false;
                    return;
                }

                var keyCode = textBoxValue.charCodeAt(0);

                if (keyCode < 65 || keyCode > 90) {
                    arguments.IsValid = false;
                    return;
                }
                arguments.IsValid = true;
            }
        </script>
    </telerik:RadScriptBlock>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Wide">

                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="server" ID="DropDownListCommandKey"
                                AutoPostBack="true"
                                Width="160px"
                                Label="Command key" />
                        </li>
                        <li>
                            <qsf:MaskedTextBox runat="server" ID="RadMaskedTextBoxFocusKey"
                                ValidationGroup="FocusKeyValidator"
                                CausesValidation="true"
                                AutoPostBack="true"
                                Width="160px"
                                LabelWidth="80"
                                Mask="L"
                                Text="M"
                                SelectionOnFocus="SelectAll"
                                Label="Focus key" />
                        </li>
                        <li>
                            <asp:CustomValidator ID="CustomValidator1" runat="server"
                                Display="Dynamic"
                                ValidationGroup="FocusKeyValidator"
                                ForeColor="Red"
                                Text="* Please type a valid uppercase Latin letter"
                                ClientValidationFunction="validateFocusKey" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance