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

Keyboard Support

  • File
    • New
    • Open
    • Save
    • Save As
    • Print Preview
    • Print
    • Close
  • Edit
    • Undo
    • Cut
    • Copy
    • Paste
    • Clipboard...
  • Insert
    • Break...
    • Page Numbers...
    • Date and Time...
    • Field...
    • Symbol...
    • Comment
    • Picture
    • Diagram
    • Text Box
    • Hyperlink
  • Format
    • Font
      • Arial
      • Verdana
      • Tahoma
      • Sans-serif
      • Arial
      • Arial Black
      • Arial Narrow
      • Arial Unicode MS
      • Bookman Old Style
      • Bookshelf Symbol 7
      • Century
      • Century Gothic
      • Comic Sans MS
      • Courier New
      • Garamond
      • Georgia
      • Goudy Old Style
      • Goudy Stout
      • Haettenschweiler
      • Helvetica
      • Impact
      • Imprint MT Shadow
      • Latha
      • Lucida Console
      • Lucida Sans
      • Lucida Sans Typewriter
      • Lucida Sans Unicode
    • Paragraph...
    • Bullets and Numbering...
    • Borders and Shading...
    • Columns
    • Tabs
    • Change Case
    • Background
      • Red
      • Green
      • Blue
      • Yellow
      • White
      • Orange
      • More Colors...
      • Fill Efects...
      • Printed Watermark...
    • Theme
    • Frames
    • Autoformat
  • View
    • Normal
    • Web Layout
    • Print Layout
    • Task Pane
  • Tools
    • Spelling And Grammar...
    • Research...
    • Language
    • Word Count...
    • Track Changes
    • Compare And Merge Documents..
  • Demo Configurator
  • Command keyAlt

Keyboard Support

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

RadMenu will seamlessly switch between mouse and keyboard navigation.

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

        <telerik:RadMenu ID="RadMenu1" runat="server" >
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
            <Items>
                <telerik:RadMenuItem Text="File" >
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit" >
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>

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 Menus 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 Menu item allowing you to navigate the items:

  • Pressing Left or Right Arrow keys will navigate through the items.
  • Pressing Down or Up Arrow keys will expand submenus with child items.
  • Pressing Enter or Spacer keys will select the focused item and expand its submenu
  • Pressing Tab will focus the Menu's first item
  • Pressing Esc will close the expanded submenu
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb"  AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Menu.Examples.Functionality.KeyboardSupport.DefaultVB"%>

<!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-medium">
       <telerik:RadMenu RenderMode="Lightweight" ID="RadMenu1" runat="server" EnableRoundedCorners="true" EnableShadows="true" TabIndex="1">
            <Items>
                <telerik:RadMenuItem Text="File">
                    <Items>
                        <telerik:RadMenuItem Text="New" />
                        <telerik:RadMenuItem Text="Open" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Save" />
                        <telerik:RadMenuItem Text="Save As" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Print Preview" />
                        <telerik:RadMenuItem Text="Print" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Close" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Edit">
                    <Items>
                        <telerik:RadMenuItem Text="Undo" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Cut" />
                        <telerik:RadMenuItem Text="Copy" />
                        <telerik:RadMenuItem Text="Paste" />
                        <telerik:RadMenuItem Text="Clipboard..." />
                        <telerik:RadMenuItem IsSeparator="True" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Insert">
                    <Items>
                        <telerik:RadMenuItem Text="Break..." />
                        <telerik:RadMenuItem Text="Page Numbers..." />
                        <telerik:RadMenuItem Text="Date and Time..." />
                        <telerik:RadMenuItem Text="Field..." />
                        <telerik:RadMenuItem Text="Symbol..." />
                        <telerik:RadMenuItem Text="Comment" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Picture" />
                        <telerik:RadMenuItem Text="Diagram" />
                        <telerik:RadMenuItem Text="Text Box" />
                        <telerik:RadMenuItem Text="Hyperlink" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Format">
                    <Items>
                        <telerik:RadMenuItem Text="Font" GroupSettings-Height="200">
                            <Items>
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Verdana" />
                                <telerik:RadMenuItem Text="Tahoma" />
                                <telerik:RadMenuItem Text="Sans-serif" />
                                <telerik:RadMenuItem IsSeparator="true" />
                                <telerik:RadMenuItem Text="Arial" />
                                <telerik:RadMenuItem Text="Arial Black" />
                                <telerik:RadMenuItem Text="Arial Narrow" />
                                <telerik:RadMenuItem Text="Arial Unicode MS" />
                                <telerik:RadMenuItem Text="Bookman Old Style" />
                                <telerik:RadMenuItem Text="Bookshelf Symbol 7" />
                                <telerik:RadMenuItem Text="Century" />
                                <telerik:RadMenuItem Text="Century Gothic" />
                                <telerik:RadMenuItem Text="Comic Sans MS" />
                                <telerik:RadMenuItem Text="Courier New" />
                                <telerik:RadMenuItem Text="Garamond" />
                                <telerik:RadMenuItem Text="Georgia" />
                                <telerik:RadMenuItem Text="Goudy Old Style" />
                                <telerik:RadMenuItem Text="Goudy Stout" />
                                <telerik:RadMenuItem Text="Haettenschweiler" />
                                <telerik:RadMenuItem Text="Helvetica" />
                                <telerik:RadMenuItem Text="Impact" />
                                <telerik:RadMenuItem Text="Imprint MT Shadow" />
                                <telerik:RadMenuItem Text="Latha" />
                                <telerik:RadMenuItem Text="Lucida Console" />
                                <telerik:RadMenuItem Text="Lucida Sans" />
                                <telerik:RadMenuItem Text="Lucida Sans Typewriter" />
                                <telerik:RadMenuItem Text="Lucida Sans Unicode" />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Paragraph..." />
                        <telerik:RadMenuItem Text="Bullets and Numbering..." />
                        <telerik:RadMenuItem Text="Borders and Shading..." />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Columns" />
                        <telerik:RadMenuItem Text="Tabs" />
                        <telerik:RadMenuItem Text="Change Case" />
                        <telerik:RadMenuItem IsSeparator="true" />
                        <telerik:RadMenuItem Text="Background">
                            <Items>
                                <telerik:RadMenuItem Text="Red"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Green"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Blue"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Yellow"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="White"></telerik:RadMenuItem>
                                <telerik:RadMenuItem Text="Orange"></telerik:RadMenuItem>
                                <telerik:RadMenuItem IsSeparator="True" />
                                <telerik:RadMenuItem Text="More Colors..." />
                                <telerik:RadMenuItem Text="Fill Efects..." />
                                <telerik:RadMenuItem Text="Printed Watermark..." />
                            </Items>
                        </telerik:RadMenuItem>
                        <telerik:RadMenuItem Text="Theme" />
                        <telerik:RadMenuItem Text="Frames" />
                        <telerik:RadMenuItem Text="Autoformat" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="View">
                    <Items>
                        <telerik:RadMenuItem Text="Normal" />
                        <telerik:RadMenuItem Text="Web Layout" />
                        <telerik:RadMenuItem Text="Print Layout" />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Task Pane" />
                    </Items>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Tools">
                    <Items>
                        <telerik:RadMenuItem Text="Spelling And Grammar..." />
                        <telerik:RadMenuItem Text="Research..." />
                        <telerik:RadMenuItem Text="Language" />
                        <telerik:RadMenuItem Text="Word Count..." />
                        <telerik:RadMenuItem IsSeparator="True" />
                        <telerik:RadMenuItem Text="Track Changes" />
                        <telerik:RadMenuItem Text="Compare And Merge Documents.." />
                    </Items>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadMenu1" />
                </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