TreeList - WAI-ARIA Support

EmployeeIDLastNameFirstNameTitleAddressReportsTo
2FullerAndrewVice President, Sales908 W. Capital Way 
  1DavolioNancySales Representative507 - 20th Ave. E. Apt. 2A2
  3LeverlingJanetSales Representative722 Moss Bay Blvd.2
  4PeacockMargaretSales Representative4110 Old Redmond Rd.2
 5BuchananStevenSales Manager14 Garrett Hill2
   6SuyamaMichaelSales RepresentativeCoventry House Miner Rd.5
   7KingRobertSales RepresentativeEdgeham Hollow Winchester Way5
   9DodsworthAnneSales Representative7 Houndstooth Rd.5
  8CallahanLauraInside Sales Coordinator4726 - 11th Ave. N.E.2
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The RadTreeList control has WAI-ARIA support which can be easily enabled by setting EnableAriaSupport="true"

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" Inherits="Telerik.TreeListExamplesCSharp.WaiAriaSupport.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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" />
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" AllowSorting="True" DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" AutoGenerateColumns="false" EnableAriaSupport="true">
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="EmployeeID">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" HeaderText="LastName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="FirstName">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Title" HeaderText="Title" HeaderStyle-Width="170px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Address" HeaderText="Address" HeaderStyle-Width="200px">
                </telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo">
                </telerik:TreeListBoundColumn>
            </Columns>
            <ClientSettings Selecting-AllowItemSelection="true"></ClientSettings>
        </telerik:RadTreeList>
    </telerik:RadAjaxPanel>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Employees]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?