New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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

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>
<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 no-bg">
    <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>
    </div>
    <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