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

Keyboard Support

  • Amsterdam
  • Barcelona
  • Bonn
  • Boston
  • Brussels
  • Dallas
  • Denver
  • Dublin
  • Liverpool
  • London
  • Madrid
  • Miami
  • Moscow
  • New York
  • Oslo
  • Paris
  • San Francisco
  • Seattle
  • Sofia
  • St.Paul
  • Demo Configurator
  • Command keyAlt

Keyboard Support

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

RadListBox will seamlessly switch between mouse and keyboard navigation.

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

RadListBox fully supports keybord navigation: selecting, deleting, moving and reordering items.

Focus

        <telerik:RadListBox ID="RadListBox1" runat="server" >
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="A" />
            <Items>
                <telerik:RadListBoxItem Text="Amsterdam" >
                </telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Barcelona" >
                </telerik:RadListBoxItem>
            </Items>
        </telerik:RadListBox>

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 ListBoxes on a given page, each of them may have a different activation combination.

In this particular example, the [CommandKey] and the [FocusKey] for the first ListBox 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 ListBox allowing you to navigate the items:

Arrow Navigation / Selection

  • Down Arrow / Up Arrow keys select next/previous item.
  • Shift + Arrow Keys selects multiple items.
  • Ctrl + Space adds currently active item to the selection.
  • Del deletes currently selected item (if AllowDelete is set to true).

Transfer

  • Ctrl + Right Arrow transfers to destination.
  • Ctrl + Left Arrow on destination transfers back to source.

Reorder

  • Ctrl + Shift + Up Arrow reorders upwards.
  • Ctrl + Shift + Down Arrow reorders downwards.

Mark Matches

Starts with

  • Start typing to highlight the matching items.
  • Esc clears the mask.
  • Backspace removes a single character.

First letter

  • Any key navigates to a matching item.
  • Subsequent press on the same key iterates over the matches.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#"  AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.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 size-narrow" id="DemoContainer1" runat="server">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" SelectionMode="Multiple"
            AllowReorder="true" Height="250" AllowDelete="true" Width="240"
            AllowTransfer="true" TransferToID="RadListBox2" TabIndex="1">
            <ButtonSettings ShowDelete="false" />
            <Items>
                <telerik:RadListBoxItem Text="Amsterdam" />
                <telerik:RadListBoxItem Text="Barcelona" />
                <telerik:RadListBoxItem Text="Bonn" />
                <telerik:RadListBoxItem Text="Boston" />
                <telerik:RadListBoxItem Text="Brussels" />
                <telerik:RadListBoxItem Text="Dallas" />
                <telerik:RadListBoxItem Text="Denver" />
                <telerik:RadListBoxItem Text="Dublin" />
                <telerik:RadListBoxItem Text="Liverpool" />
                <telerik:RadListBoxItem Text="London" />
                <telerik:RadListBoxItem Text="Madrid" />
                <telerik:RadListBoxItem Text="Miami" />
                <telerik:RadListBoxItem Text="Moscow" />
                <telerik:RadListBoxItem Text="New York" />
                <telerik:RadListBoxItem Text="Oslo" />
                <telerik:RadListBoxItem Text="Paris" />
                <telerik:RadListBoxItem Text="San Francisco" />
                <telerik:RadListBoxItem Text="Seattle" />
                <telerik:RadListBoxItem Text="Sofia" />
                <telerik:RadListBoxItem Text="St.Paul" />
            </Items>
        </telerik:RadListBox>

        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox2" Width="240" Height="250"
            SelectionMode="Multiple" TabIndex="2">
        </telerik:RadListBox>
    </div>


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="DemoContainer1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </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="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <qsf:RadioButtonList runat="server" ID="ConfigMatch" AutoPostBack="true">
                        <asp:ListItem Text="Starts with" Selected="True" />
                        <asp:ListItem Text="First letter" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <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="A"
                                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