TreeView

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

TreeView - Keyboard Support

Configurator
Focus Key:  
  1. To focus the treeview use the "Shift + Alt + AccessKey" for FireFox (or Alt + AccessKey for Chrome and Safari).

  2. Navigate through the nodes using the up / down arrows.

  3. Expand/collapse a node using + / - or left / right arrow.

  4. Select a node using the Enter key.

  5. Check / uncheck a node using the Space key.

To enable keyboard support of RadTreeView you only have to set the TabIndex or AccessKey property.

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

Keyboard support is comprised of access keys, keyboard navigation, and keyboard shortcuts. RadTreeView will seamlessly switch between mouse and keyboard navigation, just like in desktop applications.

Using the AccessKey property, you can associate an activation combination (access key) which will focus on the particular TreeNode and enable keyboard navigation. When there are multiple treeviews on a given page, each of them may have a different activation combination.  To make the AccessKey work for a node you should first set the NavigateUrl property of that node.

C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Functionality.Keyboard.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <title>ASP.NET TreeView Demo - Keyboard Support</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" UpdatePanelsRenderMode="Inline">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadMaskedTextBox1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTreeView1"></telerik:AjaxUpdatedControl>
                    <telerik:AjaxUpdatedControl ControlID="RadMaskedTextBox1"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadTreeView ID="RadTreeView1" Height="320px" Width="300" runat="server"
        CheckBoxes="True" TabIndex="1">
        <Nodes>
            <telerik:RadTreeNode Text="Mailbox - John Smith" Expanded="True" ImageUrl="~/TreeView/Img/Outlook/mailbox.gif">
                <Nodes>
                    <telerik:RadTreeNode Text="Calendar" ImageUrl="~/TreeView/Img/Outlook/calendar.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Contacts" ImageUrl="~/TreeView/Img/Outlook/contacts.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Deleted Items (6)" ImageUrl="~/TreeView/Img/Outlook/delete.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Drafts" ImageUrl="~/TreeView/Img/Outlook/drafts.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Inbox (14)" Expanded="True" ImageUrl="~/TreeView/Img/Outlook/inbox.gif">
                        <Nodes>
                            <telerik:RadTreeNode Text="Invoices" ImageUrl="~/TreeView/Img/Outlook/folder.gif">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Journal" ImageUrl="~/TreeView/Img/Outlook/journal.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Junk E-mail" ImageUrl="~/TreeView/Img/Outlook/junk.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Outbox" ImageUrl="~/TreeView/Img/Outlook/outbox.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="RSS Feeds" ImageUrl="~/TreeView/Img/Outlook/rss.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Sent Items" ImageUrl="~/TreeView/Img/Outlook/sent.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Tasks" ImageUrl="~/TreeView/Img/Outlook/tasks.gif">
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Text="Search Folders" ImageUrl="~/TreeView/Img/Outlook/search.gif">
                        <Nodes>
                            <telerik:RadTreeNode Text="Form Follow Up" ImageUrl="~/TreeView/Img/Outlook/search.gif">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Large Mail" ImageUrl="~/TreeView/Img/Outlook/search.gif">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Unread Mail" ImageUrl="~/TreeView/Img/Outlook/search.gif">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>
    <qsf:configuratorpanel runat="server" id="ConfigurationPanel1" title="Configurator"
        expanded="true">
        <table>
            <tr>
                <td>
                    Focus Key: &nbsp;
                    <telerik:radmaskedtextbox id="RadMaskedTextBox1" runat="server" width="40px" mask="L" text="P" autopostback="true" ontextchanged="RadTextBox1_TextChanged" selectiononfocus="SelectAll">
                    </telerik:radmaskedtextbox>
                </td>
            </tr>
        </table>
    </qsf:configuratorpanel>
    </form>
</body>
</html>