This is a migrated thread and some comments may be shown as answers.

[Solved] Performance Problem after clicking the nodes text often

6 Answers 236 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Christian asked on 17 Dec 2008, 02:04 PM

Hi,
in my scenario I use two Trees inside an Fullscreen Splitter (Explorer like application, using webservice-loadondemand). After clicking the text of an node about 20-30 times, and moving the mouse around the browserwindow, my client cpu usage is on 100% (I don't have to move the mouse above the trees. Moving the mouse in an empty area of the browser also stresses the cpu to 100%).
I tried to localise the problem and removed the onclientnodeclicking event and the webservicesettings of the tree, but the cpu usage is still at 100%. When clicking the plus-signs in the tree to expand the nodes, this effect does not occur. I already turned off persistloadondemandnodes and disabled viewstate. The Problem occurs in Firefox and IE6.

I just noticed, that this only occurs if draganddrop is enabled.

Can you help me out?

Thank you very much
Christian

6 Answers, 1 is accepted

answered on 18 Dec 2008, 02:47 PM

Hey Christian,

Sure am, but mine is the very basic setup modified slightly from the online demo for Drag & Drop:

http://demos.telerik.com/aspnet-ajax/TreeView/Examples/Functionality/DragAndDropNodes/DefaultCS.aspx

The only difference I can think of might be in how you're loading your TreeViews... I load mine on page load, doing a quick iteration to load both TV's with the same nodes.

Here is what I have, with client and server-side drag and drop working (but I made a mod so on Server-side it duplicates node, but on client-side it moves the node...):

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="TreeViewDragDrop.aspx.cs" Inherits="TreeViewDragDrop" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title></title> 
        
                    <style type="text/css"> 
        
                    html, body, form 
        
                    { 
        
                        height: 100%; 
        
                        overflow: hidden; 
        
                        margin: 0px; 
        
                        padding: 0px; 
        
                    } 
        
                    </style> 
        
                    <script type="text/javascript">         
        
                        /* <![CDATA[ */                                    
        
                        function onNodeDragging(sender, args)
        
                        {
        
                            var target = args.get_htmlElement();    
        
                            if(!target) return;
        
                            if (target.tagName == "INPUT")
        
                            {        
        
                                target.style.cursor = "hand";
        
                            }
        
                        }
        
                        function dropOnHtmlElement(args)
        
                        {                    
        
                         if(droppedOnInput(args))
        
                         return;                  
        
                        }                
        
                        function droppedOnInput(args)
        
                        {
        
                         var target = args.get_htmlElement();
        
                            if (target.tagName == "INPUT")
        
                            {
        
                                target.style.cursor = "default";
        
                                target.value = args.get_sourceNode().get_text();        
        
                                args.set_cancel(true);
        
                                return true;
        
                            }                          
        
                        }
        
                        function dropOnTree(args)
        
                        {
        
                            var text = "";
        
                            if(args.get_sourceNodes().length)
        
                            {    
        
                                var i;
        
                                for(i=0; i < args.get_sourceNodes().length; i++)
        
                                {
        
                                    var node = args.get_sourceNodes()[i];
        
                                    text = text + ', ' +node.get_text();
        
                                }
        
                            }
        
                        }
        
                        function clientSideEdit(sender, args)
        
                        {
        
                         var destinationNode = args.get_destNode();                                  
        
                         if(destinationNode)
        
                         {             
        
                         var firstTreeView = $find('RadTreeView1');
        
                         var secondTreeView = $find('RadTreeView2');
        
                                firstTreeView.trackChanges();
        
                                secondTreeView.trackChanges();
        
                                var sourceNodes = args.get_sourceNodes();
        
                         for (var i = 0; i < sourceNodes.length; i++)
        
                         {
        
                                    var sourceNode = sourceNodes[i];
        
                                    sourceNode.get_parent().get_nodes().remove(sourceNode);                 
        
                                    if(args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);                                                        
        
                                    if(args.get_dropPosition() == "above")     insertBefore(destinationNode, sourceNode);
        
                                    if(args.get_dropPosition() == "below")     insertAfter(destinationNode, sourceNode);
        
                         }
        
                         destinationNode.set_expanded(true);
        
                         firstTreeView.commitChanges();
        
                         secondTreeView.commitChanges();
        
                         }
        
                        }
        
                        function insertBefore(destinationNode, sourceNode)
        
                        {
        
                         var destinationParent = destinationNode.get_parent();
        
                         var index = destinationParent.get_nodes().indexOf(destinationNode);
        
                         destinationParent.get_nodes().insert(index, sourceNode);
        
                        }
        
                        function insertAfter(destinationNode, sourceNode)
        
                        {
        
                         var destinationParent = destinationNode.get_parent();
        
                         var index = destinationParent.get_nodes().indexOf(destinationNode);
        
                         destinationParent.get_nodes().insert(index+1, sourceNode);
        
                        }                
        
                        function onNodeDropping(sender, args)
        
                        {            
        
                         var dest = args.get_destNode();
        
                            if (dest)
        
                            { 
        
                             var clientSide = document.getElementById('ChbClientSide').checked;
        
                         if(clientSide)
        
                         {
        
                         clientSideEdit(sender, args);                 
        
                         args.set_cancel(true);
        
                         return;
        
                         }
        
                                dropOnTree(args);
        
                            }
        
                            else
        
                            { 
        
                                dropOnHtmlElement(args);
        
                            }
        
                        }
        
                /* ]]> */ 
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <div> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Width="100%" Orientation="Vertical"> 
        
                <telerik:RadPane ID="RP1" runat="server">                    
        
                    <asp:CheckBox ID="ChbBetweenNodes" runat="server" Text="Check Between Nodes" /> 
        
                    <br /> 
        
                    <asp:CheckBox ID="ChbClientSide" runat="server" Text="Client Side Drag?" /> 
        
                    <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True"  
        
                        OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping"  
        
                        OnDataBound="RadTreeView1_DataBound" OnClientNodeDragging="onNodeDragging" Skin="Outlook" 
        
                        OnNodeCreated="RadTreeView1_NodeCreated" > 
        
                    </telerik:RadTreeView> 
        
                </telerik:RadPane>             
        
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" /> 
        
                <telerik:RadPane ID="RP2" runat="server"> 
        
                    <telerik:RadTreeView ID="RadTreeView2" runat="server" EnableDragAndDrop="True"  
        
                        OnNodeDrop="RadTreeView1_HandleDrop" OnClientNodeDropping="onNodeDropping"  
        
                        OnDataBound="RadTreeView1_DataBound" OnClientNodeDragging="onNodeDragging" Skin="Outlook" 
        
                        OnNodeCreated="RadTreeView1_NodeCreated" > 
        
                    </telerik:RadTreeView> 
        
                </telerik:RadPane> 
        
                </telerik:RadSplitter> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

And the .cs:

    
            using System; 
        
            using System.Collections.Generic; 
        
            using System.Linq; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using Telerik.Web.UI; 
        
            public partial class TreeViewDragDrop : System.Web.UI.Page 
        
            { 
        
                protected void RadTreeView1_NodeCreated(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e) 
        
                { 
        
                    if (e.Node.Level > 0) 
        
                    { 
        
                        ee.Node.Text = e.Node.Text + " (word)"; 
        
                    } 
        
                }  
        
                    protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e) 
        
                    { 
        
                        RadTreeNode sourceNode = e.SourceDragNode; 
        
                        RadTreeNode destNode = e.DestDragNode; 
        
                        RadTreeViewDropPosition dropPosition = e.DropPosition; 
        
                        string result = ""; 
        
                        if (destNode != null)//drag&drop is performed between trees 
        
                        { 
        
                            if (this.ChbBetweenNodes.Checked)//dropped node will at the same level as a destination node 
        
                            { 
        
                                if (sourceNode.TreeView.SelectedNodes.Count <= 1) 
        
                                { 
        
                                    result += "<b>" + sourceNode.Text + "</b>" + ";"; 
        
                                    PerformDragAndDrop(dropPosition, sourceNode, destNode); 
        
                                } 
        
                                else if (sourceNode.TreeView.SelectedNodes.Count > 1) 
        
                                { 
        
                                    foreach (RadTreeNode node in sourceNode.TreeView.SelectedNodes) 
        
                                    { 
        
                                        result += "<b>" + node.Text + "</b>" + ";"; 
        
                                        PerformDragAndDrop(dropPosition, node, destNode); 
        
                                    } 
        
                                } 
        
                            } 
        
                            else//dropped node will be a sibling of the destination node 
        
                            { 
        
                                if (sourceNode.TreeView.SelectedNodes.Count <= 1) 
        
                                { 
        
                                    if (!sourceNode.IsAncestorOf(destNode)) 
        
                                    { 
        
                                        result += "<b>" + sourceNode.Text + "</b>" + ";"; 
        
                                        // remove this line for true drag and drog 
        
                                        sourceNode.InsertBefore(sourceNode.Clone()); 
        
                                        sourceNode.Owner.Nodes.Remove(sourceNode); 
        
                                        destNode.Nodes.Add(sourceNode); 
        
                                    } 
        
                                } 
        
                                else if (sourceNode.TreeView.SelectedNodes.Count > 1) 
        
                                { 
        
                                    foreach (RadTreeNode node in RadTreeView1.SelectedNodes) 
        
                                    { 
        
                                        if (!node.IsAncestorOf(destNode)) 
        
                                        { 
        
                                            result += "<b>" + node.Text + "</b>" + ";"; 
        
                                            node.Owner.Nodes.Remove(node); 
        
                                            destNode.Nodes.Add(node); 
        
                                        } 
        
                                    } 
        
                                } 
        
                            } 
        
                            destNode.Expanded = true; 
        
                            sourceNode.TreeView.ClearSelectedNodes(); 
        
                        } 
        
                    } 
        
                    private static void PerformDragAndDrop(RadTreeViewDropPosition dropPosition, RadTreeNode sourceNode, RadTreeNode destNode) 
        
                    { 
        
                        if (sourceNode.Equals(destNode) || sourceNode.IsAncestorOf(destNode)) 
        
                        { 
        
                            return; 
        
                        } 
        
                        //remove this line for true drag and drop 
        
                        sourceNode.InsertBefore(sourceNode.Clone()); 
        
                        sourceNode.Owner.Nodes.Remove(sourceNode); 
        
                        switch (dropPosition) 
        
                        { 
        
                            case RadTreeViewDropPosition.Over: 
        
                                // child 
        
                                if (!sourceNode.IsAncestorOf(destNode)) 
        
                                { 
        
                                    destNode.Nodes.Add(sourceNode); 
        
                                } 
        
                                break; 
        
                            case RadTreeViewDropPosition.Above: 
        
                                // sibling - above                     
        
                                destNode.InsertBefore(sourceNode); 
        
                                break; 
        
                            case RadTreeViewDropPosition.Below: 
        
                                // sibling - below 
        
                                destNode.InsertAfter(sourceNode); 
        
                                break; 
        
                        } 
        
                    } 
        
                    private void Page_Load(object sender, System.EventArgs e) 
        
                    { 
        
                        if (!Page.IsPostBack) 
        
                        { 
        
                            RadTreeView1.LoadContentFile("treeview.xml"); 
        
                            RadTreeView2.LoadContentFile("treeview.xml"); 
        
                        } 
        
                    } 
        
                    protected void ChbMultipleSelect_CheckedChanged(object sender, System.EventArgs e) 
        
                    { 
        
                        RadTreeView1.MultipleSelect = !RadTreeView1.MultipleSelect; 
        
                        RadTreeView2.MultipleSelect = !RadTreeView2.MultipleSelect; 
        
                    } 
        
                    protected void ChbBetweenNodes_CheckedChanged(object sender, System.EventArgs e) 
        
                    { 
        
                        RadTreeView1.EnableDragAndDropBetweenNodes = !RadTreeView1.EnableDragAndDropBetweenNodes; 
        
                        RadTreeView2.EnableDragAndDropBetweenNodes = !RadTreeView2.EnableDragAndDropBetweenNodes; 
        
                    } 
        
                    protected void RadTreeView1_DataBound(object sender, EventArgs e) 
        
                    { 
        
                        ((RadTreeView)sender).ExpandAllNodes(); 
        
                    } 
        
                }

And the xml:

    
            <?xml version="1.0" encoding="utf-8" ?> 
        
             <Tree> 
        
               <Node Text="Personal Folders" Expanded="True" > 
        
                <Node Text="Deleted Items (6)"  /> 
        
                <Node Text="Drafts"  /> 
        
                <Node Text="Inbox (14)" Expanded="True" > 
        
                  <Node Text="Invoices" /> 
        
                </Node> 
        
                <Node Text="Junk E-mail" /> 
        
                <Node Text="Outbox" /> 
        
                <Node Text="Sent Items" /> 
        
                 <Node Text="Search Folders" > 
        
                  <Node Text="Form Follow Up"  /> 
        
                  <Node Text="Large Mail" /> 
        
                  <Node Text="Unread Mail" /> 
        
                </Node> 
        
              </Node> 
        
            </Tree>

answered on 22 Dec 2008, 09:18 AM

Hi
I tried the following:
When disabling drag&drop in the treeview, the problem does not occur.

I enabled drag&drop in the treeview, removed the webservice-call, set breakpoints to all relevant client functions.
When I click on the text of the node, nothing happends but the more i click, the worse gets the performance.
When I click on the plus images in front of the text nodes, the problem does not occur.

I think this is a problem in the treeview component.
Perhaps some mouse move handlers are added and not removed...

Any Idea?

Thanks
Christian