VS 2010 [RESOLVED] TreeView Drag and Drop Node Placement

[RESOLVED] TreeView Drag and Drop Node Placement

I have a VB application with two TreeViews. I can Drag and Drop from one treeview to the other. I can prevent a drop on particular nodes. I can allow a node name change.

What I need .....

I need the easiest way to allow a node to be dropped between nodes. In other words, I need to allow the ability for my users to be able to reorder the nodes the way they need to. Whether it's a single node, or moving an entire parent/child group. Showing a line to indicate where the dragged node will drop would be great as well.

Can someone please help me?

Thanks!
bmw :confused:

Re: TreeView Drag and Drop Node Placement

Here is a TreeView I wrote about a year ago that allows you to re-order nodes by drag-drop. Its been a while since I played with this so I can't remember if it has any kinks. Try out it. It may give you ideas:-

vbnet Code:

Option Strict On
 
Imports System.ComponentModel
 
Public Class TreeViewDraggableNodes
    Inherits TreeView
 
#Region "Events"
    Public Event NodeMovedByDrag As EventHandler(Of NodeMovedByDragEventArgs)
    Protected Overridable Sub OnNodeMovedByDrag(ByVal e As NodeMovedByDragEventArgs)
        RaiseEvent NodeMovedByDrag(Me, e)
    End Sub
 
    Public Event NodeMovingByDrag As EventHandler(Of NodeMovingByDragEventArgs)
    Protected Overridable Sub OnNodeMovingByDrag(ByVal e As NodeMovingByDragEventArgs)
        RaiseEvent NodeMovingByDrag(Me, e)
    End Sub
 
    Public Event NodeDraggingOver As EventHandler(Of NodeDraggingOverEventArgs)
    Protected Overridable Sub OnNodeDraggingOver(ByVal e As NodeDraggingOverEventArgs)
        RaiseEvent NodeDraggingOver(Me, e)
    End Sub
 
#End Region
 
    Sub New()
        MyBase.AllowDrop = True
        'MyBase.DrawMode = TreeViewDrawMode.OwnerDrawAll
    End Sub
 
    <Browsable(False), DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)> _
    Public Shadows ReadOnly Property DrawMode() As System.Windows.Forms.TreeViewDrawMode
        Get
            Return MyBase.DrawMode
        End Get
    End Property
 
    '<DefaultValue(True)> _
    <Browsable(False), DesignerSerializationVisibility(DesignerSerializationVisibility.Hidden)> _
    Public Shadows ReadOnly Property AllowDrop() As Boolean
        Get
            Return MyBase.AllowDrop
        End Get
    End Property
 
    Protected Overrides Sub OnItemDrag(ByVal e As System.Windows.Forms.ItemDragEventArgs)
        MyBase.DoDragDrop(e.Item, DragDropEffects.Move)
 
        MyBase.OnItemDrag(e)
    End Sub
 
    Protected Overrides Sub OnDragOver(ByVal drgevent As System.Windows.Forms.DragEventArgs)
 
        'Get the node we are currently over
        'while dragging another node
        Dim targetNode As TreeNode = MyBase.GetNodeAt(MyBase.PointToClient(New Point(drgevent.X, drgevent.Y)))
 
        'Get the node being dragged
        Dim dragNode As TreeNode = FindNodeInDataObject(drgevent.Data)
 
        Dim eaDraggingOver As New NodeDraggingOverEventArgs(dragNode, targetNode)
        OnNodeDraggingOver(eaDraggingOver)
 
        If eaDraggingOver.DropIsLegal = False Then
            drgevent.Effect = DragDropEffects.None
            Return
        End If
 
 
        'If we are not currently dragging over
        'a node...
        If targetNode Is Nothing Then
 
            'Let no node be selected
            MyBase.SelectedNode = Nothing
 
            'Allow the move because its valid
            'to drag a node over the TreeView itself
            'the drop will place the node being dragged
            'in the root
            drgevent.Effect = DragDropEffects.Move
 
            'Get out
            Return
        End If
 
        'This would only be nothing if something is being
        'dragged over the TreeView that isn't a node
        If dragNode IsNot Nothing Then
 
            'Illegal to drop nodes inside their descendants
            'Its not logical
            If targetNode Is dragNode OrElse IsNodeDescendant(targetNode, dragNode) Then
 
                'Prevents a drop
                drgevent.Effect = DragDropEffects.None
            Else
 
                'Allows a drop
                drgevent.Effect = DragDropEffects.Move
                MyBase.SelectedNode = targetNode
            End If
 
        End If
 
        MyBase.OnDragOver(drgevent)
    End Sub
 
    Protected Overrides Sub OnDragDrop(ByVal drgevent As System.Windows.Forms.DragEventArgs)
        Dim dragNode As TreeNode = FindNodeInDataObject(drgevent.Data)
 
        If dragNode IsNot Nothing Then
            'Dim dragNode As TreeNode = DirectCast(drgevent.Data.GetData(GetType(TreeNode)), TreeNode)
 
            'Get the parent of the node before moving
            Dim prevParent As TreeNode = dragNode.Parent
            Dim parentToBe As TreeNode = If(MyBase.SelectedNode Is Nothing, Nothing, MyBase.SelectedNode)
 
            Dim eaNodeMoving As New NodeMovingByDragEventArgs(dragNode, prevParent, parentToBe)
 
            OnNodeMovingByDrag(eaNodeMoving)
 
            If eaNodeMoving.CancelMove = False Then
 
                dragNode.Remove()
                If MyBase.SelectedNode IsNot Nothing Then
                    MyBase.SelectedNode.Nodes.Add(dragNode)
                Else
                    MyBase.Nodes.Add(dragNode)
                End If
                OnNodeMovedByDrag(New NodeMovedByDragEventArgs(dragNode, prevParent))
            End If
 
        End If
 
 
        MyBase.OnDragDrop(drgevent)
    End Sub
 
    Private Function IsNodeDescendant(ByVal node As TreeNode, ByVal potentialElder As TreeNode) As Boolean
        Dim n As TreeNode
 
        If node Is Nothing OrElse potentialElder Is Nothing Then Return False
 
        Do
            n = node.Parent
 
            If n IsNot Nothing Then
                If n Is potentialElder Then
                    Return True
                Else
                    node = n
                End If
            End If
        Loop Until n Is Nothing
 
        Return False
    End Function
 
    Private Function FindNodeInDataObject(ByVal dataObject As IDataObject) As TreeNode
 
        For Each format As String In dataObject.GetFormats
            Dim data As Object = dataObject.GetData(format)
 
            If GetType(TreeNode).IsAssignableFrom(data.GetType) Then
                Return DirectCast(data, TreeNode)
            End If
        Next
 
        Return Nothing
    End Function
 
End Class
 
Public Class NodeDraggingOverEventArgs
    Inherits EventArgs
 
    Private _DropLegal As Boolean
    Private _MovingNode As TreeNode
    Private _TargetNode As TreeNode
 
    Public Sub New(ByVal movingNode As TreeNode, ByVal targetNode As TreeNode)
        _DropLegal = True
        _MovingNode = movingNode
        _TargetNode = targetNode
    End Sub
 
    Public ReadOnly Property TargetNode() As TreeNode
        Get
            Return _TargetNode
        End Get
    End Property
    Public ReadOnly Property MovingNode() As TreeNode
        Get
            Return _MovingNode
        End Get
    End Property
 
    'Use this to disallow a drop
    Public Property DropIsLegal() As Boolean
        Get
            Return _DropLegal
        End Get
        Set(ByVal value As Boolean)
            _DropLegal = value
        End Set
    End Property
 
 
End Class
 
Public Class NodeMovingByDragEventArgs
    Inherits EventArgs
 
    Private _MovingNode As TreeNode
    Private _CurParent As TreeNode
    Private _ParentToBe As TreeNode
 
    Private _CancelMove As Boolean
 
    Public Sub New(ByVal nodeMoving As TreeNode, ByVal prevParent As TreeNode, ByVal parentToBe As TreeNode)
        _MovingNode = nodeMoving
        _CurParent = prevParent
        _ParentToBe = parentToBe
    End Sub
    Public Property CancelMove() As Boolean
        Get
            Return _cancelMove
        End Get
        Set(ByVal value As Boolean)
            _CancelMove = value
        End Set
    End Property
    Public ReadOnly Property MovingNode() As TreeNode
        Get
            Return _MovingNode
        End Get
    End Property
    Public ReadOnly Property CurrentParent() As TreeNode
        Get
            Return _CurParent
        End Get
    End Property
    Public ReadOnly Property ParentToBe() As TreeNode
        Get
            Return _ParentToBe
        End Get
    End Property
End Class
 
Public Class NodeMovedByDragEventArgs
    Inherits EventArgs
 
    Private _MovedNode As TreeNode
    Private _PreviousParent As TreeNode
 
    Public Sub New(ByVal nodeMoved As TreeNode, ByVal prevParent As TreeNode)
        _MovedNode = nodeMoved
        _PreviousParent = prevParent
    End Sub
    Public ReadOnly Property MovedNode() As TreeNode
        Get
            Return _MovedNode
        End Get
    End Property
    Public ReadOnly Property PreviousParent() As TreeNode
        Get
            Return _PreviousParent
        End Get
    End Property
 
End Class

Put all of the above code inside its own code file.

Re: TreeView Drag and Drop Node Placement

Thank you, Niya!! I have created the component class and the EventArgs classes. This may sound stupid, but how and where in my app would I implement these?

Thanks again!
bmw

Re: TreeView Drag and Drop Node Placement

Quote:

Originally Posted by BMWessel

Thank you, Niya!! I have created the component class and the EventArgs classes. This may sound stupid, but how and where in my app would I implement these?

Thanks again!
bmw

Quote:

Originally Posted by Niya

Put all of the above code inside its own code file.

.....

Re: TreeView Drag and Drop Node Placement

Thank you again for responding so quickly. Looking at your code, it seems that it does what my app already does. I can move my nodes to other nodes within my TreeView and it will add the "dragged" node to the "target" node just fine. However, it adds the "dragged" node to the END of the "target" nodes collection.

What I want to do, is be able to drag a node, between two nodes and the "dragged" node becomes a sibling of the two nodes, but lies between them.

Example - Original TreeView Structure

Parent 1
-- p1Child 1
-- p1Child 2
-- p1Child 3
Parent 2
-- p2Child 1
-- p2Child 2
-- p2Child 3

Now, I want to be able to take node "p2Child 3" and move it between "p1Child 1" and p1Child 2" so it would look like

Parent 1
-- p1Child 1
-- p2Child 3
-- p1Child 2
-- p1Child 3
Parent 2
-- p2Child 1
-- p2Child 2

Thanks!!
bmw

Re: TreeView Drag and Drop Node Placement

Well you're going to have to sacrifice the ability to re-parent nodes. Your drag-drop functionality will either have to re-order or re-parent. It can't intuitively do both. If you need to re-order, you going to have to rethink the logic that makes the drag-drop work.

1 Attachment(s)

Re: TreeView Drag and Drop Node Placement

@Niya... good work. there is an alternative, offering the user a choice of where to insert the dragged node:

Attachment 99163

Re: TreeView Drag and Drop Node Placement

Quote:

Originally Posted by .paul.

@Niya... good work. there is an alternative, offering the user a choice of where to insert the dragged node:

Attachment 99163

Amazing addition! I hadn't considered that at all. It feels quite intuitive as well. I'm surprised you figured it out enough to alter it like that in so little time. Its been like a year since I wrote that and I was reluctant to touch it for fear of breaking it.

Re: TreeView Drag and Drop Node Placement

I seem to be unable to explain myself properly. As your program works well even with the changes made by .paul, I still do not think you understand what I am looking for. Your program pops up a context menu asking to select "Child" or "Sibling", which is great! However, when I select either one, the dragged node is "added" to the parent.nodes collection as the last "element/node". What I need to do is have the ability to take a node, and physically drop it BETWEEN two exising nodes as a sibling.

So, if I have a ParentNode that contains ChildNode1, ChildNode2, ChildNode3, and ChildNode4; and I take ChildNode3 and drag it between ChildNode1 and ChildNode2, I do NOT want to "add" a child to ChildNode1 or ChildNode2, I want to insert ChildNode3 BETWEEN ChildNode1 and ChildNode2 to the Parent.Nodes list would then be ChildNode1, ChildNode3, ChildNode2, ChildNode4.

Is there ANY code out there that can help me with this???

Thanks,
bmw :cool:

Re: TreeView Drag and Drop Node Placement

try this:

Code:

Protected Overrides Sub OnDragDrop(ByVal drgevent As System.Windows.Forms.DragEventArgs) Dim dragNode As TreeNode = FindNodeInDataObject(drgevent.Data) If dragNode IsNot Nothing Then 'Dim dragNode As TreeNode = DirectCast(drgevent.Data.GetData(GetType(TreeNode)), TreeNode) 'Get the parent of the node before moving If cms.Items.Count = 0 Then cms.Items.Add("Child", Nothing, AddressOf childClicked) cms.Items.Add("Sibling", Nothing, AddressOf siblingClicked) cms.Tag = drgevent cms.Show(drgevent.X, drgevent.Y) Return Else cms.Items.Clear() End If Dim prevParent As TreeNode = dragNode.Parent Dim parentToBe As TreeNode = If(MyBase.SelectedNode Is Nothing, Nothing, If(choice = "child", MyBase.SelectedNode, If(choice = "sibling", MyBase.SelectedNode.Parent, Nothing))) Dim eaNodeMoving As New NodeMovingByDragEventArgs(dragNode, prevParent, parentToBe) choice = "" OnNodeMovingByDrag(eaNodeMoving) If eaNodeMoving.CancelMove = False Then dragNode.Remove() If parentToBe IsNot Nothing Then 'parentToBe.Nodes.Add(dragNode) parentToBe.Nodes.Insert(MyBase.SelectedNode.Index + 1, dragNode) Else MyBase.Nodes.Add(dragNode) End If OnNodeMovedByDrag(New NodeMovedByDragEventArgs(dragNode, prevParent)) End If End If MyBase.OnDragDrop(drgevent) End Sub

one other improvement too:

Code:

Private Sub cms_Closed(ByVal sender As Object, ByVal e As System.Windows.Forms.ToolStripDropDownClosedEventArgs) Handles cms.Closed If e.CloseReason <> ToolStripDropDownCloseReason.ItemClicked Then cms.Items.Clear() End If End Sub

Re: TreeView Drag and Drop Node Placement

Well, I have actually figured out how to insert between nodes without a context menu.

First off, I replaced the MS TreeView Control with the Infragistics NetAdvantage UltraTree; setting the AllowDrop property = True; and the Override properties of NodeSpacingBefore and NodeSpacingAfter to both be 1 (a value of -1 will overlap the node bounds; a value of 0 allows the node bounds to reside next to eachother with no spacing between; anything above 1, will allow spacing between nodes)

With that in mind, below is the code to enable node placement either between nodes or add as a child node.

STILL LOOKING for a way to draw a line when the mouse is "dragged over" the space between the nodes.

Code:

Imports Infragistics.Win Imports Infragistics.Win.UltraWinTree Public Class Form1 Inherits System.Windows.Forms.Form Private mDragNode As UltraTreeNode Private mDestNode As UltraTreeNode Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 'Populate UltraTree Controls Dim iRoot As Integer Dim iChild As Integer 'Populate both Tree Views For iRoot = 1 To 10 Dim rootNode As UltraTreeNode = New UltraTreeNode("Node " & iRoot.ToString()) For iChild = 1 To 10 rootNode.Nodes.Add(rootNode.Text & " Child " & iChild.ToString()) Next iChild sourceTree.Nodes.Add(rootNode) rootNode = Nothing Next iRoot End Sub Private Sub sourceTree_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles sourceTree.DragDrop Dim pt As Point Dim destNode As UltraTreeNode Dim prevNode As UltraTreeNode Dim nextNode As UltraTreeNode Dim pointNode As UltraTreeNode Dim parentNode As UltraTreeNode Dim prevRect As Rectangle Dim nextRect As Rectangle Dim destRect As Rectangle Dim pointRec As Rectangle Dim pntY As Integer pt = sourceTree.PointToClient(New Point(e.X, e.Y)) pointNode = sourceTree.GetNodeFromPoint(pt) If pointNode Is Nothing Then 'Loop through, adding to the x,y coordinates until we locate a node Do pt.X = pt.X + 1 pt.Y = pt.Y + 1 pointNode = sourceTree.GetNodeFromPoint(pt) Loop Until Not pointNode Is Nothing End If 'Let's grab coordinates pointRec = pointNode.Bounds parentNode = pointNode.Parent prevNode = pointNode.PrevVisibleNode prevRect = prevNode.Bounds nextNode = pointNode.NextVisibleNode nextRect = nextNode.Bounds destNode = prevNode.NextVisibleNode destRect = destNode.Bounds 'Accomodate for the node spacing before and after each node pntY = pt.Y - sourceTree.Override.NodeSpacingBefore pntY = pntY - sourceTree.Override.NodeSpacingAfter If ((pntY = destRect.Top) Or (pntY = destRect.Bottom)) Then destNode.Nodes.Add(mDragNode) ElseIf ((pntY > destRect.Top) And (pntY < destRect.Bottom)) Then destNode.Nodes.Add(mDragNode) ElseIf ((pntY > destRect.Bottom) And (pntY < nextRect.Top)) Then If parentNode Is Nothing Then sourceTree.Nodes.Insert((destNode.Index + 1), mDragNode) Else parentNode.Nodes.Insert((destNode.Index + 1), mDragNode) End If ElseIf ((pntY < destRect.Top) And (pntY > prevRect.Bottom)) Then If parentNode Is Nothing Then sourceTree.Nodes.Insert((prevNode.Index + 1), mDragNode) Else parentNode.Nodes.Insert((prevNode.Index + 1), mDragNode) End If End If 'Be sure to Refresh the tree after a drag and drop sourceTree.Refresh() End Sub Private Sub sourceTree_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles sourceTree.DragEnter e.Effect = DragDropEffects.Move End Sub Private Sub sourceTree_DragOver(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles sourceTree.DragOver Dim pt As Point Dim utNode As UltraTreeNode Dim leftPos As Integer Dim rightPos As Integer pt = sourceTree.PointToClient(New Point(e.X, e.Y)) utNode = sourceTree.GetNodeFromPoint(pt) If Not utNode Is Nothing Then leftPos = utNode.Bounds.Left rightPos = sourceTree.Width - 4 utNode = sourceTree.ActiveNode utNode.Selected = True Else 'draw line End If End Sub Private Sub sourceTree_SelectionDragStart(ByVal sender As Object, ByVal e As System.EventArgs) Handles sourceTree.SelectionDragStart mDragNode = sourceTree.ActiveNode mDragNode.Remove() sourceTree.DoDragDrop(mDragNode, DragDropEffects.Move) mDragNode.Selected = False End Sub End Class