Drag and drop nodes between two treeviews inside RadPanelBar

Article information
Article relates to	RadPanelBar v3.x  RadTreeView v6.3.4.0  or  RadControls for ASP.NET AJAX  (Telerik.Web.UI v2008.1.x)
Created by	Unknown, Telerik
Last modified by	Simon, Telerik

HOW-TO
Drag and drop nodes between two TreeViews inside RadPanelBar.

DESCRIPTION
In some cases you may want to reorder the structure of the treeview controls which reside in RadPanelBar. By taking advantage of the drag and drop feature of RadTreeView you can easily modify the hierarchy they represent (including multiple drag and drop).



SOLUTION
Simply hook to OnNodeDrop server event of the TreeViews and provide the necessary program logic in the respective event handlers to ensure the proper execution of the drag and drop mechanism. Please review the ASPX / C# / VB.NET sections of the article for further details (note that the tree.xml and tree1.xml are arbitrary TreeView XML Data Source files).

ASPX

<telerik:RadPanelBar id="RadPanelbar1" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 24px"

Runat="server" Width="176px">

<Items>

<telerik:RadPanelItem Text="subroot1">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadTreeView

ID="RadTreeView1"

runat="server"

OnNodeDrop="TreeDrop"

MultipleSelect="True"

DataSourceID="XmlDataSource1"

DataTextField="Text"

DataValueField="Value"

EnableDragAndDrop="true">

</telerik:RadTreeView>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

<telerik:RadPanelItem Text="subroot2">

<Items>

<telerik:RadPanelItem>

<ItemTemplate>

<telerik:RadTreeView

ID="RadTreeView2"

runat="server"

OnNodeDrop="TreeDrop"

MultipleSelect="True"

DataSourceID="XmlDataSource2"

DataTextField="Text"

DataValueField="Value"

EnableDragAndDrop="true">

</telerik:RadTreeView>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/tree.xml" XPath="/Nodes/Node">

</asp:XmlDataSource>

<asp:XmlDataSource ID="XmlDataSource2" runat="server" DataFile="~/tree1.xml" XPath="/Nodes/Node">

</asp:XmlDataSource>

C#

protected void TreeDrop(object sender, RadTreeNodeDragDropEventArgs NodeEvent)

{

RadTreeNode destNode = NodeEvent.DestDragNode;

string result = string.Empty;

if (NodeEvent.DraggedNodes.Count > 0)

{

foreach (RadTreeNode node in NodeEvent.DraggedNodes)

{

if (node != destNode.Parent)

{

RadTreeNodeCollection nodeCollection = (node.ParentNode != null) ? node.ParentNode.Nodes : node.TreeView.Nodes;

nodeCollection.Remove(node);

destNode.Nodes.Add(node);

}

node.Selected = false;

}

}

destNode.Expanded = true;

}

VB



SOLUTION
Simply hook to OnNodeDrop server event of the TreeViews and provide the necessary program logic in the respective event handlers to ensure the proper execution of the drag and drop mechanism. Please review the ASPX / C# / VB.NET sections of the article for further details (note that the tree.xml and tree1.xml are arbitrary TreeView XML Content files).

ASPX

<radp:RadPanelbar id="RadPanelbar1" style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 24px"

Runat="server" Theme="PinkDrop" Width="176px">

<PanelItemTemplates>

<radp:PanelItemTemplate ID="Template1">

<ContentTemplate>

<radt:RadTreeView id="RadTreeView1" runat="server" OnNodeDrop="TreeDrop" ContentFile="tree.xml" DragAndDrop="True"

MultipleSelect="True"></radt:RadTreeView>

</ContentTemplate>

</radp:PanelItemTemplate>

<radp:PanelItemTemplate ID="Template2">

<ContentTemplate>

<radt:RadTreeView id="RadTreeView2" runat="server" ContentFile="tree1.xml" DragAndDrop="True" MultipleSelect="True"

OnNodeDrop="TreeDrop"></radt:RadTreeView>

</ContentTemplate>

</radp:PanelItemTemplate>

</PanelItemTemplates>

<PanelItems>

<radp:PanelItem Text="root1">

<radp:PanelItem ID="t1" Text="subroot1" TemplateID="Template1"></radp:PanelItem>

<radp:PanelItem ID="t2" Text="subroot2" TemplateID="Template2"></radp:PanelItem>

</radp:PanelItem>

</PanelItems>

</radp:RadPanelbar>

C#

protected void TreeDrop(object sender, RadTreeNodeEventArgs NodeEvent)

{

// Fetch event data

RadTreeView RadTree = (RadTreeView)sender;

RadTreeNode destNode = NodeEvent.DestDragNode;

string result = string.Empty;

if (RadTree.SelectedNodes.Count > 0)

{

foreach (RadTreeNode node in RadTree.SelectedNodes)

{

if (node != destNode.Parent)

{

RadTreeNodeCollection nodeCollection = (node.Parent != null) ? node.Parent.Nodes : node.TreeView.Nodes;

nodeCollection.Remove(node);

destNode.Nodes.Add(node);

}

node.Selected = false;

}

}

destNode.Expanded = true;

RadTree.ClearSelectedNodes();

}

VB.NET

Protected Sub TreeDrop(ByVal sender As Object, ByVal NodeEvent As RadTreeNodeEventArgs)

' Fetch event data

Dim RadTree As RadTreeView = DirectCast(sender, RadTreeView)

Dim destNode As RadTreeNode = NodeEvent.DestDragNode

Dim result As String = String.Empty

If RadTree.SelectedNodes.Count > 0 Then

For Each node As RadTreeNode In RadTree.SelectedNodes

If node IsNot destNode.Parent Then

Dim nodeCollection As RadTreeNodeCollection

If (node.Parent Is Nothing) Then

nodeCollection = node.TreeView.Nodes

Else

nodeCollection = node.Parent.Nodes

End If

nodeCollection.Remove(node)

destNode.Nodes.Add(node)

End If

node.Selected = False

Next

End If

destNode.Expanded = True

RadTree.ClearSelectedNodes()

End Sub