TreeView

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

TreeView - Load on Demand Modes

Configuration
  • Server-Side CallBack
    • 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:

  • Server-Side CallBack
  • 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 Server-Side CallBack 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
C# VB
Show code in new window Demo isolation steps
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Programming.LoadOnDemandModes.DefaultCS" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<!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">
    <title>ASP.NET TreeView Demo - Load on Demand Modes</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />
    <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">
               Server-Side CallBack</div>
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" Width="100%"
                OnNodeExpand="RadTreeView1_NodeExpand">
            </telerik:RadTreeView>
        </li>
        <li class="treeview-item">
            <div class="text">
                Server-Side</div>
            <telerik:RadTreeView ID="RadTreeView2" runat="server" Height="300px" Width="100%"
                OnNodeExpand="RadTreeView2_NodeExpand">
            </telerik:RadTreeView>
        </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">
                </WebServiceSettings>
            </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">
                </WebServiceSettings>
            </telerik:RadTreeView>
        </li>
    </ul>
    </form>
</body>
</html>