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

Keyboard Support

  • Demo Configurator
  • Command keyAlt

Keyboard Support

A critical requirement for software accessibility is keyboard support as a complete alternative to pointing devices (mouse, etc.).

Keyboard support is comprised of command key, focus key, and keyboard navigation. RadComoboBox will seamlessly switch between mouse and keyboard navigation.

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

<telerik:RadComboBox ID="RadComboBox1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
</telerik:RadComboBox>

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 ComboBoxes 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.

Once the RadComboBox is focused (by pressing [CommandKey] + [FocusKey]):

  • PressAlt + DownArrow to expand the dropdown.
  • Press Alt + UpArrow or Esc to close the dropdown of the control.
  • Press DownArrow/UpArrow to navigate through the items.
  • Press Enter to select an Item.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • combobox.xml
<%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ComboBox.Examples.Functionality.KeyboardSupport.DefaultVB"Language="vb"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</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-thin">
        <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Height="140" Width="300px"
            TabIndex="1" MarkFirstMatch="True" />
    </div>


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="configurationpanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="configurationpanel1" LoadingPanelID="radajaxloadingpanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadComboBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

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

    <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"
                                ValidationGroup="FocusKeyValidator"
                                ForeColor="Red" Display="Dynamic"
                                Text="* Please type a valid uppercase lattin letter"
                                ClientValidationFunction="validateFocusKey" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance