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

Simple vs Advanced Binding

Simple binding

EmployeeIDLastNameFirstNameTitleTitleOfCourtesyReportsTo
12
Page size:
2FullerAndrewVice President, SalesDr. 
  1DavolioNancySales RepresentativeMs.2
  3LeverlingJanetSales RepresentativeMs.2

Advanced binding with NeedDataSource event handling

EmployeeIDLastNameFirstNameTitleTitleOfCourtesyReportsTo
12
Page size:
2FullerAndrewVice President, SalesDr. 
  1DavolioNancySales RepresentativeMs.2
  3LeverlingJanetSales RepresentativeMs.2

The key to the advanced data binding of Telerik RadTreeList is handling correctly the NeedDataSource event. That's why we chose this exact name. 'Need' in this case actually means that if at an exact moment the data-source property does not point to a valid data-source object, the treelist will not behave correctly.

This event fires in the following cases:

  • Right after OnLoad, Telerik RadTreeList checks the viewstate for stored TreeList-related information. If such information is missing (when the page loads for the first time), the NeedDataSource event is fired. This also means that if the EnableViewState property of the control  has been set to false, the treelist will bind each time the page loads (not only the first time)
  • After expand/collapse
  • When paging event occurs
  • When other operations requiring Rebind occurs

The advantages of using this event are that the developer does not need to write any code handling the logic about when and how the data-binding should be processed. It is still the developer's responsibility to construct properly a data source object and assign it to the RadTreeList's DataSource property.

In the code of the NeedDataSource handler you should prepare the data source (list of objects) for Telerik RadTreeList and assign it to the grid's DataSource property. Also you should set the DataKeyNames and ParentDataKeyNames propertied for the TreeList control.

Note: You should never call the DataBind() method from inside the NeedDataSource handler or mix simple data-binding mode with advanced data-binding

Alternatively, you can use AccessDataSource/SqlDataSource/ObjectDataSource/XmlDataSource controls to populate Telerik RadTreeList with data - this is another advanced data-binding mode of the control. See the the rest of the examples in this section for more info.

Simple data-binding through the DataBind() method can be used in simple scenarios which does not require complex operations.

The correct approach when using simple data-binding is to call the DataBind() method on the first page load when !Page.IsPostBack and after handling some event (sort event for example). Keep in mind that if you choose simple data-binding, you will need to assign data-source and rebind the grid after each operation (expanding/collapsing, paging, sorting, etc.)

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.DataBinding.SimpleVsAdvancedBinding.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-containers">
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0"></telerik:RadAjaxLoadingPanel>
        <div class="demo-container">
            <h2 class="qsfSubtitle">Simple binding</h2>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
                <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList1" AllowPaging="true" PageSize="3" DataKeyNames="EmployeeID" OnItemCommand="RadTreeList1_ItemCommand" OnPageSizeChanged="RadTreeList1_PageSizeChanged" OnPageIndexChanged="RadTreeList1_PageIndexChanged" ParentDataKeyNames="ReportsTo">
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
        <div class="demo-container">
            <h2 class="qsfSubtitle">Advanced binding with NeedDataSource event handling</h2>
            <telerik:RadAjaxPanel ID="RadAjaxPanel2" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
                <telerik:RadTreeList RenderMode="Lightweight" runat="server" ID="RadTreeList2" AllowPaging="true" PageSize="3" DataKeyNames="EmployeeID" ParentDataKeyNames="ReportsTo" OnNeedDataSource="RadTreeList2_NeedDataSource">
                </telerik:RadTreeList>
            </telerik:RadAjaxPanel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance