TreeView - Keyboard Support

Isolate this demo as a stand-alone application
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.

Keyboard support

Press Alt + AccessKey in IE / Chrome, Alt + Shift + AccessKey in FireFox, Shift + Esc + AccessKey in Opera, or use Tab to move to and focus the control.

  • Navigate through the nodes using the Down Arrow and Up Arrow.

  • Expand/collapse a node using + / - or Left Arrow / Right Arrow .

  • Select a node using the Enter key.

  • Check / Uncheck a node using the Space key.

<%@ Page Inherits="Telerik.QuickStart.QsfPage"  %>

<%@ 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 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 ID="RadTreeView1" Height="420px" Width="300" runat="server" AccessKey="W"
            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>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?