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 Q2 2011 released 07/12/2011
select

TreeView / Performance with Web Services

Example Configuration
  • Expand the 'Root Node' to see the load time
  • None
  • Root Node

  • 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.

Source Code

C# VB.NET
Show code in new window Demo isolation steps
  • <%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.TreeView.WebServicePerformance.DefaultVB" %>

    <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
    <%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
    <%@ Register TagPrefix="qsf" TagName="Header" Src="~/Common/Header.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="HeadTag" Src="~/Common/HeadTag.ascx" %>
    <%@ Register TagPrefix="qsf" TagName="Footer" Src="~/Common/Footer.ascx" %>
    <!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 id="Head1" runat="server">
        <qsf:HeadTag runat="server" ID="Headtag2"></qsf:HeadTag>
        <style type="text/css">
            span#total,
            #ClickedNodeLabelPanel
            {
                display: inline !important;
                font-style:italic;
            }
            
            .RadTreeView { border: 1px solid #CBE7F5; }
            
            #ConfiguratorPanel1 ul
            {
                margin:0;
                padding:0;
                list-style:none;
            }
            
            #ConfiguratorPanel1 li
            {
                line-height: 28px;
            }
            #ConfiguratorPanel1 li label
            {
                padding: 0 7px;
            }
        </style>
    </head>
    <body class="BODY">
        <form runat="server" id="Form1" method="post">
            <qsf:Header ID="Header2" runat="server" NavigationLanguage="VB"></qsf:Header>
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" EnableScriptCombine="true" />
            <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ClickedNodeLabel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1" Expanded="true">
                <ul>
                    <li style="width: 300px; border: none;">
                        <label>
                            Load time:</label><span id="total">Expand the 'Root Node' to see the load time</span></li>
                    <li style="width: 220px;">
                        <label>
                            Number of nodes to load:</label>
                        <telerik:RadNumericTextBox runat="server" ID="NodeCountTextBox" Value="1000" MaxValue="4000"
                            MinValue="100" Width="60px" ShowSpinButtons="True">
                            <NumberFormat DecimalDigits="0" />
                        </telerik:RadNumericTextBox></li>
                    <li>
                        <label>
                            Clicked node:</label><asp:Label runat="server" ID="ClickedNodeLabel" Text="None" /></li>
                </ul>
            </qsf:ConfiguratorPanel>
            <telerik:RadTreeView ID="RadTreeView1" runat="server" Width="100%" Height="200px"
                 PersistLoadOnDemandNodes="false" LoadingStatusPosition="BelowNodeText"
                OnClientNodePopulating="nodePopulating" OnClientNodePopulated="nodePopulated"
                OnClientNodeCollapsed="nodeCollapsed" OnClientNodeClicked="nodeClicked">
                <ExpandAnimation Type="none" />
                <CollapseAnimation Type="none" />
                <WebServiceSettings Path="NodeWebService.asmx" Method="GetNodes" />
                <Nodes>
                    <telerik:RadTreeNode Text="Root Node" ExpandMode="WebService" />
                </Nodes>
            </telerik:RadTreeView>
            <telerik:RadScriptBlock runat="Server" ID="RadScriptBlock1">

                <script type="text/javascript">
            
                var startTime;
        
                function nodePopulating(sender, args)
                {
                    //Pass the number of nodes to the web service method
                    var input = $find("<%= NodeCountTextBox.ClientID %>");
                    if (args.get_context())
                        args.get_context().NumberOfNodes = input.get_value();
        
                    //Log the start time
                    startTime = new Date();
                }
        
                function nodePopulated(sender, args)
                {
                    //Log the end time
                    var endTime = new Date();
                    //Display the total time
                    $get("total").innerHTML = endTime - startTime + "ms";
                }
        
                function nodeCollapsed(sender, args)
                {
                    //Clear the nodes populated on demand
                    resetNode(args.get_node());
                }
        
                function resetNode(node)
                {
                    node.get_nodes().clear();
                    node.set_expandMode(Telerik.Web.UI.TreeNodeExpandMode.WebService);
                }
        
                function nodeClicked(sender, args)
                {
                    var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                    //Send an Ajax request containing the JSON representation of the clicked node. The AjaxRequest will be fired in codebehind.
                    ajaxManager.ajaxRequest(args.get_node().toJsonString());
                }
        
                </script>

            </telerik:RadScriptBlock>
            <qsf:Footer ID="Footer2" runat="server"></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-2024 © Telerik. All right reserved
Telerik Inc, 201 Jones Rd, Waltham, MA 02451