Performance Problem after clicking the nodes text often

7 posts, 0 answers
  1. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 17 Dec 2008 Link to this post

    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
  2. Evan Hutnick
    Evan Hutnick avatar
    26 posts
    Member since:
    Sep 2008

    Posted 17 Dec 2008 Link to this post

    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. 
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 18 Dec 2008 Link to this post

    Posting code is not as easy, it is very extensive.
    Are you using drag & drop too?
  5. Evan Hutnick
    Evan Hutnick avatar
    26 posts
    Member since:
    Sep 2008

    Posted 18 Dec 2008 Link to this post

    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> 







  6. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 22 Dec 2008 Link to this post

    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
  7. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 12 Jan 2009 Link to this post

    Hi,
    I just opend a support-ticket on this problem.
  8. Christian
    Christian avatar
    37 posts
    Member since:
    Oct 2007

    Posted 15 Jan 2009 Link to this post

    after installing version 2008.3.1314.35 it works perfect.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017