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

Keyboard Support

Select...
  • 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. RadDropDownList will seamlessly switch between mouse and keyboard navigation.

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

<telerik:RadDropDownList ID="RadDropDownList1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
</telerik:RadDropDownList>

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 DropDownList 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 RadDropDownList 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.
  • Use PageUp or PageDown arrows to scroll to the previous/next portion of items in the drop down
  • Typing a letter moves focus to the next instance of a visible item, whose text begins with that letter.
  • Typing a sequence of letters moves focus to the first matched item, whose text starts with that sequence.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="DropDownList.Examples.Accessibility.KeyboardSupport.DefaultVB" %>

<!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:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" runat="server"
            DropDownHeight="200px"
            Width="300px" DataSourceID="SqlDataSource1"
            DataTextField="ContactName" DefaultMessage="Select..."
            DataValueField="CustomerID">
        </telerik:RadDropDownList>
    </div>

    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT [CustomerID], [ContactName] FROM [Customers] ORDER By ContactName"></asp:SqlDataSource>



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