Telerik is a leading vendor of ASP.NET AJAX, ASP.NET MVC, Silverlight, WinForms and WPF controls and components, as well as .NET Reporting, .NET ORM , .NET CMS, Code Analysis, Mocking, Team Productivity and Automated Testing Tools. Building on its expertise in interface development and Microsoft technologies, Telerik helps customers build applications with unparalleled richness, responsiveness and interactivity. Telerik products help thousands of companies to be more productive and deliver reliable applications under budget and on time.
Version Q1 2012 released 04/11/2012
select

TreeView / Load on Demand Modes

Configuration
  • Client-Side
    • Products
    • Purchase
    • Support
    • Community
    • Corporate
  • Server-Side
    • Products
    • Purchase
    • Support
    • Community
    • Corporate
  • Web Service
    • Products
    • Purchase
    • Support
    • Community
    • Corporate
  • Page Methods
    • Products
    • Purchase
    • Support
    • Community
    • Corporate

  • The Load On Demand feature allows the developer to delay the population of RadTreeView and save HTML output thus improving performance. RadTreeView supports three different types of load on demand:

    • Client-Side
    • Server-Side
    • Web Service
    • Page Methods

    To use a specific load on demand mode you need to set the ExpandMode property of a RadTreeNode. When using Client-Side or Server-Side mode you need subscribe to the NodeExpand event and create the tree nodes. Here is a sample implementation:

    C#:
    protected void RadTreeView1_NodeExpand(object sender, RadTreeNodeEventArgs e)
    {
    	RadTreeNode onDemandNode = new RadTreeNode("Loaded on demand");
    	//Configure the node to populate on demand as well
    	onDemandNode.ExpandMode = TreeNodeExpandMode.ServerSideCallback;
    	//Add the node as a child of the currently expanded node
    	e.Node.Nodes.Add(onDemandNode);
    }
    
    VB.NET:
    Protected Sub RadTreeView1_NodeExpand(sender As Object, e As RadTreeNodeEventArgs)
    	Dim onDemandNode As New RadTreeNode("Loaded on demand")
    	'Configure the node to populate on demand as well
    	onDemandNode.ExpandMode = TreeNodeExpandMode.ServerSideCallback
    	'Add the node as a child of the currently expanded node
    	e.Node.Nodes.Add(onDemandNode)
    End Sub
    

    For Web-Service load on demand you need to populate the WebServiceSettings property of RadTreeView.

    <telerik:RadTreeView ID="RadTreeView1" runat="server">
        <WebServiceSettings Path="TreeViewWebService.asmx" Method="LoadNodes" />
    </telerik:RadTreeView>
    

    Then implement the method to return the nodes that are loaded on demand. Here is a sample implementation:

    C#
    [ScriptService]
    public class TreeViewWebService : WebService
    {
    	[WebMethod]
    	public RadTreeNodeData[] LoadNodes(RadTreeNodeData node, object context)
    	{
    		List<RadTreeNodeData> result = new List<RadTreeNodeData>();
    		RadTreeNodeData node = new RadTreeNodeData();
    		node.Text = "Loaded on demand";
    		node.ExpandMode = TreeNodeExpandMode.WebService;
            
    		return result.ToArray();
    	}
    }
    
    VB.NET
    <ScriptService> _
    Public Class TreeViewWebService
    	Inherits WebService
    	<WebMethod> _
    	Public Function LoadNodes(node As RadTreeNodeData, context As Object) As RadTreeNodeData()
    		Dim result As New List(Of RadTreeNodeData)()
    
    		Dim node As New RadTreeNodeData()
    		node.Text = "Loaded on demand"
    		node.ExpandMode = TreeNodeExpandMode.WebService
    
    		Return result.ToArray()
    	End Function
    End Class
    

    Page Methods load on demand mode is very similar to Web Service. You need to set the WebServiceSettings property and use set the ExpandMode property to WebService. Make sure your page method is static and is marked with the WebService attribute.

    <telerik:RadTreeView ID="RadTreeView1" runat="server">
        <WebServiceSettings Path="Default.aspx" Method="LoadNodes" />
    </telerik:RadTreeView>
    
    C#
    [WebMethod]
    public static RadTreeNodeData[] LoadNodes(RadTreeNodeData node, object context)
    {
    	List<RadTreeNodeData> result = new List<RadTreeNodeData>();
    	RadTreeNodeData node = new RadTreeNodeData();
    	node.Text = "Loaded on demand";
    	node.ExpandMode = TreeNodeExpandMode.WebService;
        
    	return result.ToArray();
    }
    
    VB.NET
    <WebMethod> _
    Public Shared Function LoadNodes(node As RadTreeNodeData, context As Object) As RadTreeNodeData()
    	Dim result As New List(Of RadTreeNodeData)()
    
    	Dim node As New RadTreeNodeData()
    	node.Text = "Loaded on demand"
    	node.ExpandMode = TreeNodeExpandMode.WebService
    
    	Return result.ToArray()
    End Function
    

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView_Examples_Programming_LoadOnDemandModes_DefaultCS" %>

    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <qsf:HeadTag runat="server" ID="Headtag1"></qsf:HeadTag>
        <style type="text/css">
            #ConfiguratorPanel1 .label
            {
                float:left;
                font: 13px/28px 'Segoe UI' , Arial, sans-serif;
                color: #4888a2;
            }
            
            #ConfiguratorPanel1 div
            {
                clear:both;
            }
            
            div.text
            {
                font: 13px 'Segoe UI' , Arial, sans-serif;
                color: #4888a2;
                padding: 6px 18px;
                display: block;
            }
            
            ul.treeview-list
            {
                list-style:none;
                padding:0;
                margin:0;
            }
            
            li.treeview-item
            {
                float:left;
                width:170px;
                padding-right:5px;
                border-left: solid 1px #b1d8eb;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="mainForm" method="post">
            <qsf:Header runat="server" ID="Header1" NavigationLanguage="C#"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1">
            </telerik:RadScriptManager>
            <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Configuration">
                <div>
                    <asp:Label AssociatedControlID="RadioButtonList1" runat="server" CssClass="label">Loading status position:</asp:Label>
    <asp:RadioButtonList AutoPostBack="True" ID="RadioButtonList1" runat="server" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged"
    RepeatDirection="Horizontal" RepeatLayout="Flow">

                        <asp:ListItem Selected="True" Value="BeforeNodeText">Before Text</asp:ListItem>
                        <asp:ListItem Value="AfterNodeText">After Text</asp:ListItem>
                        <asp:ListItem Value="BelowNodeText">Below Text</asp:ListItem>
                        <asp:ListItem Value="None">None</asp:ListItem>
                    </asp:RadioButtonList>
                </div>
            </qsf:ConfiguratorPanel>
            <ul class="treeview-list" style="margin-left: 80px;">
                <li class="treeview-item" style="border-left: none">
                    <div class="text">
                        Client-Side</div>
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" Width="100%"
                        OnNodeExpand="RadTreeView1_NodeExpand" />
                </li>
                <li class="treeview-item">
                    <div class="text">
                        Server-Side</div>
                    <telerik:RadTreeView ID="RadTreeView2" runat="server" Height="300px" Width="100%"
                        OnNodeExpand="RadTreeView2_NodeExpand" />
                </li>
            </ul>
            <ul class="treeview-list">
                <li class="treeview-item">
                    <div class="text">
                        Web Service</div>
                    <telerik:RadTreeView ID="RadTreeView3" runat="server" Height="300px" Width="100%">
                        <WebServiceSettings Path="ProductCategories.asmx" Method="GetTreeViewCategories" />
                    </telerik:RadTreeView>
                </li>
            </ul>
            <ul class="treeview-list">
                <li class="treeview-item">
                    <div class="text">
                        Page Methods</div>
                    <telerik:RadTreeView ID="RadTreeView4" runat="server" Height="300px" Width="100%">
                        <WebServiceSettings Path="defaultcs.aspx" Method="GetProducts" />
                    </telerik:RadTreeView>
                </li>
            </ul>
            <qsf:Footer runat="server" ID="Footer1"></qsf:Footer>
        </form>
    </body>
    </html>

Get more than expected!

Take your time to truly experience the power of RadControls for ASP.NET AJAX with a free 60-day trial backed up by Telerik’s unlimited dedicated support.

Download your RadControls for ASP.NET AJAX trial and jumpstart your development with the available Getting Started resources.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Copyright 2002-2012 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451