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
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
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.
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?
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...):
And the .cs:
And the xml:
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
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.
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.