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

Declarative Binding

SqlDataSource

EmployeeIDLast NameFirst NameTitleReportsTo
1
Page size:
2FullerAndrewVice President, Sales 

XML DataSource

Title
12
Page size:
Products
 Consulting
Purchase
Support
Community

ObjectDataSource

Control Name
1
Page size:
UI for ASP.NET Ajax
UI for Silverlight

RadTreeList can be bound to the following ASP 2.x DataSource control types:

  • SqlDataSource
  • ObjectDataSource
  • XmlDataSource
  • AccessDataSource

All you need to do is set the DataSourceID property of the TreeList to the ID of the Data Source control and the corresponding DataKeyNames and ParentDataKeyNames. Then you can use ASP.NET binding expressions (Eval or Bind) for the fields that will be visualized in the control.

  • DefaultCS.aspx
  • SiteDataItem.cs
  • TreeList.xml
<%@ 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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0"></telerik:RadAjaxLoadingPanel>
        <div class="demo-container">
            <h2 class="qsfSubtitle">SqlDataSource</h2>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
                <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" DataSourceID="SqlDataSource1" AutoGenerateColumns="false" AllowPaging="true" PageSize="5" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo">
                    <Columns>
                        <telerik:TreeListBoundColumn DataField="EmployeeID" HeaderText="EmployeeID" UniqueName="EmployeeID">
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="LastName" HeaderText="Last Name" UniqueName="LastName">
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="FirstName" HeaderText="First Name" UniqueName="FirstName">
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="Title" HeaderText="Title" UniqueName="Title">
                        </telerik:TreeListBoundColumn>
                        <telerik:TreeListBoundColumn DataField="ReportsTo" HeaderText="ReportsTo" UniqueName="ReportsTo">
                        </telerik:TreeListBoundColumn>
                    </Columns>
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container">
            <h2 class="qsfSubtitle">XML DataSource</h2>
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
                <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList2" AllowPaging="true" DataSourceID="XmlDataSource1" PageSize="5" DataKeyNames="categoryID" ParentDataKeyNames="parentCategoryID" AutoGenerateColumns="false">
                    <Columns>
                        <telerik:TreeListBoundColumn DataField="title" UniqueName="Title" HeaderText="Title">
                        </telerik:TreeListBoundColumn>
                    </Columns>
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container">
            <h2 class="qsfSubtitle">ObjectDataSource</h2>
            <telerik:RadAjaxPanel ID="RadAjaxPanel3" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
                <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList3" DataSourceID="ObjectDataSource1" AllowPaging="true" PageSize="5" DataKeyNames="ID" ParentDataKeyNames="ParentID" AutoGenerateColumns="false">
                    <Columns>
                        <telerik:TreeListBoundColumn DataField="Text" UniqueName="Text" HeaderText="Control Name">
                        </telerik:TreeListBoundColumn>
                    </Columns>
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
        <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" ProviderName="System.Data.SqlClient" SelectCommand="SELECT EmployeeID, LastName, FirstName, Title, ReportsTo FROM Employees" runat="server"></asp:SqlDataSource>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="TreeList.xml"></asp:XmlDataSource>
        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetSiteData" TypeName="Telerik.Web.Examples.SiteDataItem"></asp:ObjectDataSource>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance