TreeView - WAI-ARIA Support

  • Books
    • Arts
    • Biographies
    • Children's Books
    • Cooking
    • History
    • Fiction
    • Mystery
    • Nonfiction
    • Romance
    • Science Fiction
  • Music
  • Software
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadTreeView control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport to true.

To focus the RadTreeView press Alt + M.

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

<!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 RenderMode="Lightweight" ID="RadTreeView1" runat="server" EnableAriaSupport="true">
            <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
            <Nodes>
                <telerik:RadTreeNode Text="Books" Expanded="true">
                    <Nodes>
                        <telerik:RadTreeNode Text="Arts">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Biographies">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Books">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Cooking">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="History">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Fiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Mystery">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Nonfiction">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Romance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Science Fiction">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Music">
                    <Nodes>
                        <telerik:RadTreeNode Text="Alternative">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Blues">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Children's Music">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Classical">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Country">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Dance">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Folk">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Hard Rock">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Jazz">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Soundtracks">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
                <telerik:RadTreeNode Text="Software">
                    <Nodes>
                        <telerik:RadTreeNode Text="Database">
                        </telerik:RadTreeNode>
                        <telerik:RadTreeNode Text="Networking">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?