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

Performance with Web Services

  • Root Node
  • Demo Configurator
  • Expand the 'Root Node' to see the load time
  • None
This example demonstrates how to achieve the best performance with RadTreeView when dealing with large ammounts of data (nodes). The important steps are:
  1. Use Web Service load on demand.

    Web Service load on demand does not request the page and avoids the execution of the page life cycle. Less data is transferred between the client and the server.

  2. Set the PersistLoadOnDemandNodes property to false.

    Persistence of nodes loaded on demand is enabled by default. This is required if you need load on demand nodes to trigger server side events (NodeClick, NodeDrop). If you don't consume the NodeClick or NodeDrop events you can disable the persistence of nodes loaded on demand to improve the performance.

  3. The EnableViewState property is set to false.

    ViewState is not required if PersistLoadOnDemandNodes is set to false. Disabling it would save some output.

  4. The implementation of the Web Service methods uses two optimization techniques to decrease the size of the generated JSON output:
    • The return type of the web method is IEnumerable. This prevents the serialization of the type name in the JSON output:
      [WebMethod]
      public IEnumerable GetNodes(RadTreeNodeData node, IDictionary context) 
      {
          int numberOfNodes = 1000;
          List<NodeData> nodes = new List<NodeData>();
          for (int i = 0; i < numberOfNodes; i++)
          {
              NodeData nodeData = new NodeData();
              nodeData.Text = "Node " + i;
              nodes.Add(nodeData);
          }
      
          return nodes;
      }
      				
    • The web method returns only the data required by the application. In this case only the node's Text property is serialized by using a custom class - NodeData. You should prefer this approach over using the RadTreeNodeData class to preserve output size:
      class NodeData
      {
          private string text;
      
          public string Text
          {
              get { return text; }
              set { text = value; }
          }
      }
      				

The OnClientNodePopulating and OnClientNodePopulated events are used only to measure the time requred to perform the load on demand operation. Consuming them is not required for the proper operation of RadTreeView in this scenario.
Consuming the OnClientNodeClicked event is used to trigger server side event when the user clicks a node.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="TreeView.Examples.Programming.Performance.DefaultCS"Language="C#"  %>

<%@ 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" />
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script type="text/javascript" src="scripts.js"></script>
        <script type="text/javascript">
            //<![CDATA[
            Sys.Application.add_load(function() {
                demo.ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                demo.input = $find("<%= NodeCountTextBox.ClientID %>");
                demo.total = $get("total");
            });
            //]]>
        </script>
    </telerik:RadScriptBlock>
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ClickedNodeLabel"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-thin">
        <telerik:RadTreeView RenderMode="Lightweight" ID="RadTreeView1" runat="server"  Width="100%" Height="200px"
            PersistLoadOnDemandNodes="false" LoadingStatusPosition="BelowNodeText" OnClientNodePopulating="nodePopulating"
            OnClientNodePopulated="nodePopulated" OnClientNodeCollapsed="nodeCollapsed" OnClientNodeClicked="nodeClicked">
            <ExpandAnimation Type="none"></ExpandAnimation>
            <CollapseAnimation Type="none"></CollapseAnimation>
            <WebServiceSettings Path="NodeWebService.asmx" Method="GetNodes">
            </WebServiceSettings>
            <Nodes>
                <telerik:RadTreeNode Text="Root Node" ExpandMode="WebService">
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeView>
    </div>
    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Title="Demo Configurator">
        <Views>
            <qsf:View>
                 <ul class="fb-group"> 
                    <li>
                        <label>Load time:</label>
                        <span id="total">Expand the 'Root Node' to see the load time</span>
                    </li>
                    <li>
                        <label>Number of nodes to load:</label>
                        <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="NodeCountTextBox" Value="1000" MaxValue="4000" MinValue="100" Width="80px" ShowSpinButtons="True">
                            <NumberFormat DecimalDigits="0">

                            </NumberFormat>
                        </telerik:RadNumericTextBox>
                    </li>
                    <li>
                        <label>Clicked node:</label>
                        <asp:Label runat="server" ID="ClickedNodeLabel" Text="None" />
                    </li>
                </ul>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance