
Nicholas Cloud
Top achievements
Rank 1
Nicholas Cloud
asked on 15 Feb 2010, 08:03 PM
Hi, I am trying to get client-side drag-n-drop working for a RadTreeView. Each node is templated. When I drag a node, the drag-n-drop works fine, but the node looses it's template and instead displays the fully qualified name of the data bound object in plain text (all client-side; no AJAX yet). Here is my code. See the attachment for how the tree looks *after* I drag and drop nodes (fully qualified names blurred).
Thanks!
Telerik.Web.UI.RadTreeNode.prototype.insertBefore = function(destinationNode) { |
var parent = destinationNode.get_parent(); |
var index = parent.get_nodes().indexOf(destinationNode); |
parent.get_nodes().insert(index, this); |
}; |
Telerik.Web.UI.RadTreeNode.prototype.insertAfter = function(destinationNode) { |
var parent = destinationNode.get_parent(); |
var index = parent.get_nodes().indexOf(destinationNode); |
parent.get_nodes().insert(index + 1, this); |
}; |
Telerik.Web.UI.RadTreeNode.prototype.positionRelativeTo = function(destinationNode, dropPosition) { |
switch(dropPosition) { |
case "over": |
destinationNode.get_nodes().add(this); |
break; |
case "above": |
this.insertBefore(destinationNode); |
break; |
case "below": |
this.insertAfter(destinationNode); |
break; |
default: |
break; |
} |
}; |
//actual client event handler |
function nodeDropping(sender, eventArgs) { |
var source = eventArgs.get_sourceNode(); |
var destination = eventArgs.get_destNode(); |
var position = eventArgs.get_dropPosition(); |
sender.trackChanges(); |
source.positionRelativeTo(destination, position); |
sender.commitChanges(); |
} |
Thanks!
11 Answers, 1 is accepted
0

Nicholas Cloud
Top achievements
Rank 1
answered on 15 Feb 2010, 08:15 PM
Another strange anomaly I'm seeing is that when I drag a node, the template will appear duplicated on the screen far above where I am dragging and dropping. On the attached screenshot, I am dragging "Team N" onto "Team L" (yellow line), and you can see how the template for "Team N" is being duplicated further up the screen (red line). Once I release the mouse button, the duplicated template disappears, the node is moved, but it only shows text under "Team L".
0
Accepted
Hello Nicholas Cloud,
You can not use a Client Drag & Drop for a RadTreeView with Templates. Try using a server-side:
If you still have a problems please attach the full code.
Best wishes,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
You can not use a Client Drag & Drop for a RadTreeView with Templates. Try using a server-side:
protected
void
RadTreeView1_NodeDrop(
object
sender, RadTreeNodeDragDropEventArgs e)
{
RadTreeNode sourceNode = e.SourceDragNode;
RadTreeNode destNode = e.DestDragNode;
RadTreeViewDropPosition dropPosition = e.DropPosition;
if
(sourceNode.TreeView.SelectedNodes.Count <= 1)
{
PerformDragAndDrop(dropPosition, sourceNode, destNode);
}
else
if
(sourceNode.TreeView.SelectedNodes.Count > 1)
{
foreach
(RadTreeNode node
in
sourceNode.TreeView.SelectedNodes)
{
PerformDragAndDrop(dropPosition, node, destNode);
}
}
destNode.Expanded =
true
;
sourceNode.TreeView.ClearSelectedNodes();
RadTreeView1.DataBind();
}
private
static
void
PerformDragAndDrop(RadTreeViewDropPosition dropPosition, RadTreeNode sourceNode,
RadTreeNode destNode)
{
if
(sourceNode.Equals(destNode) || sourceNode.IsAncestorOf(destNode))
{
return
;
}
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
;
}
}
If you still have a problems please attach the full code.
Best wishes,
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0

Nicholas Cloud
Top achievements
Rank 1
answered on 17 Feb 2010, 02:54 PM
Thanks for the information. It seems odd to me that drag-and-drop wouldn't be supported for templated items client-side. Since nodes are DOM-element wrappers, why wouldn't the rendered template DOM elements travel with them when the nodes are moved?
0
Hi Nicholas Cloud,
Currently, RadTreeView does not support client templates. We will add this feature in one of the next releases. Consequently, the drag-and-drop functionality is not possible in this scenario since the templates are instantiated server side.
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Currently, RadTreeView does not support client templates. We will add this feature in one of the next releases. Consequently, the drag-and-drop functionality is not possible in this scenario since the templates are instantiated server side.
Veronica Milcheva
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0

Nicholas Cloud
Top achievements
Rank 1
answered on 19 Feb 2010, 02:18 PM
Thanks Veronica, the server-side code works well. I look forward to future releases.
0

Tina
Top achievements
Rank 1
answered on 15 Apr 2011, 05:58 PM
I just ran into this same problem. What's the ETA on the next version that includes client side drag and drop with templates?
I'm also having a problem where my templates disappear off the tree after a series of drag and drops??? Has anyone seen this?
I'm also having a problem where my templates disappear off the tree after a series of drag and drops??? Has anyone seen this?
0

Tina
Top achievements
Rank 1
answered on 16 Apr 2011, 04:29 PM
Here's some additional information . . . .
I used the server-side code posted above. Please see attached JPG. Thanks.
I used the server-side code posted above. Please see attached JPG. Thanks.
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
EnableDragAndDrop
=
"true"
EnableDragAndDropBetweenNodes
=
"true"
MultipleSelect
=
"true"
OnNodeDrop
=
"RadTreeView_NodeDrop"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
ExpandMode
=
"ClientSide"
Text
=
"Bags For City"
Expanded
=
"true"
>
<
Nodes
>
<
telerik:RadTreeNode
Expanded
=
"true"
>
<
NodeTemplate
>
<
div
>
<
table
>
<
tr
>
<
td
><
p
>Sort by</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"columnDropDown"
runat
=
"server"
>
<
asp:ListItem
>Column 1</
asp:ListItem
>
<
asp:ListItem
>Column 2</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>in</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"orderDropDown"
runat
=
"server"
>
<
asp:ListItem
>Ascending</
asp:ListItem
>
<
asp:ListItem
>Desending</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>order</
p
></
td
>
</
tr
>
</
table
>
</
div
>
</
NodeTemplate
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Expanded
=
"true"
>
<
NodeTemplate
>
<
div
>
<
table
>
<
tr
>
<
td
><
p
>Then sort by</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"columnDropDown"
runat
=
"server"
>
<
asp:ListItem
>Column 1</
asp:ListItem
>
<
asp:ListItem
>Column 2</
asp:ListItem
>
<
asp:ListItem
>Column 3</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>in</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"orderDropDown"
runat
=
"server"
>
<
asp:ListItem
>Ascending</
asp:ListItem
>
<
asp:ListItem
>Desending</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>order</
p
></
td
>
</
tr
>
</
table
>
</
div
>
</
NodeTemplate
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Expanded
=
"true"
>
<
NodeTemplate
>
<
div
>
<
table
>
<
tr
>
<
td
><
p
>Then sort by</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"columnDropDown"
runat
=
"server"
>
<
asp:ListItem
>Column 1</
asp:ListItem
>
<
asp:ListItem
>Column 2</
asp:ListItem
>
<
asp:ListItem
>Column 3</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>in</
p
></
td
>
<
td
><
asp:DropDownList
ID
=
"orderDropDown"
runat
=
"server"
>
<
asp:ListItem
>Ascending</
asp:ListItem
>
<
asp:ListItem
>Desending</
asp:ListItem
>
</
asp:DropDownList
></
td
>
<
td
><
p
>order</
p
></
td
>
</
tr
>
</
table
>
</
div
>
</
NodeTemplate
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
0
Hi Tina,
The issue is because when you use templates and perform drag & drop after a period of time the inner control tree can not be recreated. When ASP.NET tries to load the viewstate of the control it's expecting the previous control you added, but it will encounter another control instead (after drop) in the place of the first control.
The solution is to set the EnableViewState property to "false" of the RadTreeView.
Regards,
Veronica Milcheva
the Telerik team
The issue is because when you use templates and perform drag & drop after a period of time the inner control tree can not be recreated. When ASP.NET tries to load the viewstate of the control it's expecting the previous control you added, but it will encounter another control instead (after drop) in the place of the first control.
The solution is to set the EnableViewState property to "false" of the RadTreeView.
Regards,
Veronica Milcheva
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0

Kjell
Top achievements
Rank 1
answered on 14 Dec 2012, 03:59 AM
I'm having a similar issue, I'm pretty sure I'm doing something wrong but I'm not sure how to fix it.
My treeview is bound to an ObjectDataSource. But I also have a button on the page which allows the user to add a node via client side code. I set the template in the function which adds the note, but I also have an identical NodeTemplate. So if the item came from the ObjectDataSource it gets the template and if it was added client side then it also gets the template. I am using client side drag/drop. If I drag/drop a node which was added on the client side it works fine, if I drag/drop a node which came from the ObjectDataSource then it works but it loses the template.
Basically the initial tree nodes load from the ObjectDataSource, but then any editing is done client side (drag drop, add, remove). The data is stored in SQL but it doesn't gave updated until the user hits a "Save" button, at which point the ObjectDataSource is updated as well. I think the problem is my mix of client and server side stuff, but I'm not sure what the solution is. Any suggestions? I don't want to update SQL until the user hits Save.
My treeview is bound to an ObjectDataSource. But I also have a button on the page which allows the user to add a node via client side code. I set the template in the function which adds the note, but I also have an identical NodeTemplate. So if the item came from the ObjectDataSource it gets the template and if it was added client side then it also gets the template. I am using client side drag/drop. If I drag/drop a node which was added on the client side it works fine, if I drag/drop a node which came from the ObjectDataSource then it works but it loses the template.
Basically the initial tree nodes load from the ObjectDataSource, but then any editing is done client side (drag drop, add, remove). The data is stored in SQL but it doesn't gave updated until the user hits a "Save" button, at which point the ObjectDataSource is updated as well. I think the problem is my mix of client and server side stuff, but I'm not sure what the solution is. Any suggestions? I don't want to update SQL until the user hits Save.
0

Kjell
Top achievements
Rank 1
answered on 17 Dec 2012, 10:25 PM
bump
0
Hi Kjell,
My best suggestion would be that you open a support ticket where you can attach a very simplified runnable project that we can debug locally and determine what is causing the problematic behavior. Thus, we can inspect it thoroughly and help you in the most efficient way.
Greetings,
Kate
the Telerik team
My best suggestion would be that you open a support ticket where you can attach a very simplified runnable project that we can debug locally and determine what is causing the problematic behavior. Thus, we can inspect it thoroughly and help you in the most efficient way.
Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.