Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Performance Problem after clicking the nodes text often

6 Answers 170 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Christian
Top achievements
Rank 1
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

Sort by
0
Evan Hutnick
Top achievements
Rank 1
answered on 17 Dec 2008, 09:06 PM
Hey Christian,

Would you be able to post the code you are using for this?  I have a similar setup that I modified to sit within a full-screen splitter and I went clicking crazy but my cpu usage never jumped or spiked. 
0
Christian
Top achievements
Rank 1
answered on 18 Dec 2008, 08:39 AM
Posting code is not as easy, it is very extensive.
Are you using drag & drop too?
0
Evan Hutnick
Top achievements
Rank 1
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> 







0
Christian
Top achievements
Rank 1
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
0
Christian
Top achievements
Rank 1
answered on 12 Jan 2009, 01:39 PM
Hi,
I just opend a support-ticket on this problem.
0
Christian
Top achievements
Rank 1
answered on 15 Jan 2009, 01:49 PM
after installing version 2008.3.1314.35 it works perfect.
Tags
TreeView
Asked by
Christian
Top achievements
Rank 1
Answers by
Evan Hutnick
Top achievements
Rank 1
Christian
Top achievements
Rank 1
Share this question
or