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

Load on Demand

 IDStringItemDateItemNumberItemBoolItemParentID
12345678910...
Page size:
1StringItem2/24/2012 12:00:00 AM271 
2StringItem15/31/2011 12:00:00 AM2 
3StringItem26/1/2011 4:53:57 PM3 
4StringItem1836/17/2011 12:00:00 AM19 
5StringItem46/3/2011 4:53:57 PM5 
6StringItem56/4/2011 4:53:57 PM6 
7StringItem66/5/2011 4:53:57 PM7 
8StringItem76/6/2011 4:53:57 PM8 
9StringItem86/7/2011 4:53:57 PM9 
10StringItem96/8/2011 4:53:57 PM10 
11StringItem106/9/2011 4:53:57 PM11 
12StringItem116/10/2011 4:53:57 PM12 
13StringItem126/11/2011 4:53:57 PM13 
14StringItem136/12/2011 4:53:57 PM14 
15StringItem26962/23/2012 12:00:00 AM270 

RadTreeList supports a Load-on-Demand functionality. It allows child nodes to be added on the fly as parent nodes are expanded. This mode is useful when you need to fill sub nodes only when the parent node is expanded or the data source contains thousands of records:

To activate this mode:

  1. Set AllowLoadOnDemand property to true

  2. Get the root items from the datasource and assign them to the RadTreeList.DataSource into RadTreeList.NeedDataSource event:

    .CS 
    protected void RadTreeList1_NeedDataSource(object sender, TreeListNeedDataSourceEventArgs e)
{
    RadTreeList1.DataSource = TreeListSource.Select("ParentID IS NULL");
}
    VB 
    Protected Sub RadTreeList1_NeedDataSource(sender As Object, e As TreeListNeedDataSourceEventArgs)
    RadTreeList1.DataSource = TreeListSource.[Select]("ParentID IS NULL")
End Sub

  3. Handle the RadTreeList.ChildItemsDataBind event and select the subset of items related to the expanded item. Assign them to the child items datasource property that is available through the second argument passed to the event handler:

    .CS 
    protected void RadTreeList1_ChildItemsDataBind(object sender, TreeListChildItemsDataBindEventArgs e)
{
    int id = Convert.ToInt32(e.ParentDataKeyValues["ID"].ToString());
    e.ChildItemsDataSource = TreeListSource.Select("ParentID = " + id.ToString());
}
    .VB 
    Protected Sub RadTreeList1_ChildItemsDataBind(sender As Object, e As TreeListChildItemsDataBindEventArgs)
    Dim id As Integer = Convert.ToInt32(e.ParentDataKeyValues("ID").ToString())
    e.ChildItemsDataSource = TreeListSource.[Select]("ParentID = " + id.ToString())
End Sub
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" Inherits="Telerik.TreeListExamplesCSharp.DataBinding.LoadOnDemand.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" MinDisplayTime="0"></telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1" runat="server">
        <telerik:RadTreeList RenderMode="Lightweight" Width="100%" ID="RadTreeList1" AllowLoadOnDemand="true" AllowSorting="true" AllowPaging="true" PageSize="15" AutoGenerateColumns="false"
            OnChildItemsDataBind="RadTreeList1_ChildItemsDataBind" OnNeedDataSource="RadTreeList1_NeedDataSource" OnUpdateCommand="RadTreeList1_UpdateCommand"
            DataKeyNames="ID" ParentDataKeyNames="ParentID" AllowMultiItemSelection="true" runat="server">
            <Columns>
                <telerik:TreeListButtonColumn CommandName="Edit" Text="Edit" UniqueName="EditCommandColumn" HeaderStyle-Width="50px" ItemStyle-HorizontalAlign="Center"></telerik:TreeListButtonColumn>
                <telerik:TreeListBoundColumn DataField="ID" HeaderText="ID" ReadOnly="true" UniqueName="ID" HeaderStyle-Width="75px" ForceExtractValue="Always"></telerik:TreeListBoundColumn>
                <telerik:TreeListBoundColumn DataField="StringItem" HeaderText="StringItem" UniqueName="StringItem" HeaderStyle-Width="175px"></telerik:TreeListBoundColumn>
                <telerik:TreeListDateTimeColumn DataField="DateItem" HeaderText="DateItem">
                </telerik:TreeListDateTimeColumn>
                <telerik:TreeListNumericColumn DataField="NumberItem" HeaderText="NumberItem" UniqueName="NumberItem" HeaderStyle-Width="150px"></telerik:TreeListNumericColumn>
                <telerik:TreeListCheckBoxColumn DataField="BoolItem" HeaderText="BoolItem" HeaderStyle-Width="100px" UniqueName="BoolItem">
                </telerik:TreeListCheckBoxColumn>
                <telerik:TreeListBoundColumn DataField="ParentID" ReadOnly="true" HeaderText="ParentID" UniqueName="ParentID" ForceExtractValue="Always" HeaderStyle-Width="100px"></telerik:TreeListBoundColumn>
            </Columns>
            <ClientSettings>
                <Selecting AllowItemSelection="true" AllowToggleSelection="true"></Selecting>
            </ClientSettings>
        </telerik:RadTreeList>
    </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance