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

Keyboard Support

  • Mailbox - John Smith
    • Calendar
    • Contacts
    • Deleted Items (6)
    • Drafts
    • Inbox (14)
      • Invoices
    • Journal
    • Junk E-mail
    • Outbox
    • RSS Feeds
    • Sent Items
    • Tasks
    • Search Folders
  • 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. RadTreeView will seamlessly switch between mouse and keyboard navigation.

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

<telerik:RadTreeView ID="RadTreeView1" runat="server" >
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
</telerik:RadTreeView>

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 TreeViews 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 RadTreeView is focused (by pressing [CommandKey] + [FocusKey]) the user can:

  • Navigate through the nodes using the Down Arrow and Up Arrow.
  • Expand/collapse a node using the + / - Numpad keys or Left Arrow / Right Arrow .
  • Select a node using the Enter key.
  • Check / Uncheck a node using the Space key.

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

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Title="" Language="C#"  AutoEventWireup="true"
    CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.Keyboard.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ 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:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"
            CheckBoxes="True" TabIndex="1">
            <Nodes>
                <telerik:RadTreeNode Text="Mailbox - John Smith" Expanded="True" ImageUrl="~/TreeView/images/Outlook/mailbox.gif">
                    <Nodes>
                        <telerik:RadTreeNode Text="Calendar" ImageUrl="~/TreeView/images/Outlook/calendar.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Contacts" ImageUrl="~/TreeView/images/Outlook/contacts.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Deleted Items (6)" ImageUrl="~/TreeView/images/Outlook/delete.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Drafts" ImageUrl="~/TreeView/images/Outlook/drafts.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Inbox (14)" Expanded="True" ImageUrl="~/TreeView/images/Outlook/inbox.gif">
                            <Nodes>
                                <telerik:RadTreeNode Text="Invoices" ImageUrl="~/TreeView/images/Outlook/folder.gif">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Journal" ImageUrl="~/TreeView/images/Outlook/journal.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Junk E-mail" ImageUrl="~/TreeView/images/Outlook/junk.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Outbox" ImageUrl="~/TreeView/images/Outlook/outbox.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="RSS Feeds" ImageUrl="~/TreeView/images/Outlook/rss.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Sent Items" ImageUrl="~/TreeView/images/Outlook/sent.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Tasks" ImageUrl="~/TreeView/images/Outlook/tasks.gif">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Search Folders" ImageUrl="~/TreeView/images/Outlook/search.gif">
                            <Nodes>
                                <telerik:RadTreeNode Text="Form Follow Up" ImageUrl="~/TreeView/images/Outlook/search.gif">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Large Mail" ImageUrl="~/TreeView/images/Outlook/search.gif">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode Text="Unread Mail" ImageUrl="~/TreeView/images/Outlook/search.gif">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>


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