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

Declarative Definition

Employee IDLast NameFirst NameHire DateCityPostal CodeCountryReports To
2FullerAndrew14/08/1992Tacoma98401USA 
  1DavolioNancy01/05/1992Seattle98122USA2
  3LeverlingJanet01/04/1992Kirkland98033USA2
  4PeacockMargaret03/05/1993Redmond98052USA2
 5BuchananSteven17/10/1993LondonSW1 8JRUK2
  8CallahanLaura05/03/1994Seattle98105USA2

RadTreeList exposes a set of properties that allow creating a fully functional control completely through mark up. It lets you bind to and display self-hierarchical data structures by only specifying a few values.

The key points in the declarative definition of RadTreeList are:

  • Specifing the control's DataSourceID, ParentDataKeyNames and DataKeyNames properties.
  • Choosing between autogenerated columns (AutoGenerateColumns="true", which is the default value) or defining the columns manually according to your own requirements.
  • Enabling and customizing different features - paging, item selection.
  • Customizing the look and feel of the control - by setting a Skin for it and / or using the various styling properties exposed (PagerStyle, ItemStyle, AlternatingItemStyle, HeaderStyle, SelectedItemStyle).
  • DefaultCS.aspx
<%@ Page Language="C#"  %>

<%@ 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>
    <script type="text/C#" runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
                RadTreeList1.ExpandToLevel(1);
        }
    </script>
</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:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadTreeList RenderMode="Lightweight" ID="RadTreeList1" runat="server" DataSourceID="SqlDataSource1" ParentDataKeyNames="ReportsTo" DataKeyNames="EmployeeID" AutoGenerateColumns="false">
            <Columns>
                <telerik:TreeListBoundColumn DataField="EmployeeID" UniqueName="EmployeeID" HeaderText="Employee ID"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="LastName" UniqueName="LastName" HeaderText="Last Name"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="FirstName" UniqueName="FirstName" HeaderText="First Name"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="HireDate" DataFormatString="{0:dd/MM/yyyy}" DataType="System.DateTime" UniqueName="HireDate" HeaderText="Hire Date"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="City" UniqueName="City" HeaderText="City"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="PostalCode" UniqueName="PostalCode" HeaderText="Postal Code"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="Country" UniqueName="Country" HeaderText="Country"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="ReportsTo" UniqueName="ReportsTo" HeaderText="Reports To"></telerik:TreeListBoundColumn>
            </Columns>
        </telerik:RadTreeList>
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT [ReportsTo], [EmployeeID], [LastName], [FirstName], [HireDate], [City], [PostalCode], [Country] FROM [Employees]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance