TreeView - Load on Demand Modes

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

Demo Configurator




Isolate this demo as a stand-alone application

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
<%@ 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>Telerik ASP.NET Example</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="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <h2>Server-Side CallBack</h2>

            <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="300px" Width="100%"
                OnNodeExpand="RadTreeView1_NodeExpand">
            </telerik:RadTreeView>
        </div>
        <div class="demo-container">
            <h2>Server-Side</h2>

            <telerik:RadTreeView ID="RadTreeView2" runat="server" Height="300px" Width="100%"
                OnNodeExpand="RadTreeView2_NodeExpand">
            </telerik:RadTreeView>
        </div>
        <div class="demo-container">
            <h2>Web Service </h2>

            <telerik:RadTreeView ID="RadTreeView3" runat="server" Height="300px" Width="100%">
                <WebServiceSettings Path="ProductCategories.asmx" Method="GetTreeViewCategories">
                </WebServiceSettings>
            </telerik:RadTreeView>
        </div>
        <div class="demo-container">
            <h2>Page Methods </h2>

            <telerik:RadTreeView ID="RadTreeView4" runat="server" Height="300px" Width="100%">
                <WebServiceSettings Path="defaultcs.aspx" Method="GetProducts">
                </WebServiceSettings>
            </telerik:RadTreeView>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View Title="Loading status position">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <qsf:RadioButtonList AutoPostBack="True" ID="RadioButtonList1" runat="server"
                        OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">
                        <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>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?