ASP.NET TreeView Demo - Keyboard Support

To focus the treeview use the "Shift + Alt + AccessKey" for FireFox (or Alt + AccessKey for Chrome and Safari).
Navigate through the nodes using the up / down arrows.
Expand/collapse a node using + / - or left / right arrow.
Select a node using the Enter key.
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="Telerik.Web.Examples.TreeView.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>

Controls

SharePoint Web Parts

Support Resources

Integration Examples

TreeView

Rate this demo

TreeView - Keyboard Support

try now Download a free 30-day trial with unlimited technical support.

Get Started Easily Explore our help resources to get up to speed with the RadControls faster.

See Pricing Check out the offers. Purchase an individual suite or treat yourself to one of our bundles.