Highlight nodes when drag and drop on multiple treeview

[Dickson]

Hi

I have 2 treeviews.

When i highlight one item on treeview 1 and drag and drop to tree view 2. While the mouse button is kept pressed, and i hover on treeview 2, i would want the hovered node to be highlighted or style changed.

In the example in the attachment, the node "jacket" is to be highlighted..when the node "car" is dragged over it.

May I know if this can be done?

[Dimitar]

Hello Dickson,

Straight to your question. I have attached a project and a .gif file which demonstrate the desired behavior. As you can see in the project you can subscribe to RadTreeView DragOverNode event which occurs when drag feedback is needed for a node. In this event you can access the TargetNode which represents the RadTreeNode located under the Node which is currently being dragged - in the example from your screenshot TargetNode is "Jacket". You can then change the GradientStyles of the TargetNode and save this node so that you can later reset its value when TargetNode is changed. 

Additionally, you will notice in the project that we have a custom TreeViewDragDropService where we have a method called HideHintWindow(). Please note that in order to achieve the desired behavior it is necessary to hide the Hint window for the RadTreeNode that is currently being dragged.

After discussing it with the team we have decided that HideHintWindow and ShowHintWindow methods should be exposed in order to make similar implementations easier for our customers.

That is why I have logged a new item in our feedback portal. You can track its progress, subscribe for status changes and add your comments on the following link - RadTreeView: Expose HideHintWindow and ShowHintWindow methods

I have also updated your Telerik points. 

In the meanwhile feel free to use the implementation with custom TreeViewDragDropService attached in the ticket.

I hope you find this information useful.

Regards,
Dimitar
Progress Telerik

[Dickson]

Hi, Dimitar,

Thank you for the reply. It's quite useful. One question, if the source is an external one, e.g. dragging and dropping a file from windows explorer onto to tree view, how can I achieve the same result?

[Dess | Tech Support Engineer, Principal]

Hello, Dickson,

My colleague, Dimitar, is off today so I will assist you with this ticket.

If the drag operation is started from RadTreeView, I would like to note that TreeViewDragDropService handles the whole drag and drop operation. However, if the drag operation is started by an external source, e.g. Windows Explorer, it is managed by the ole-drag-drop functionality. 

Dragging files from Windows Explorer to your WinForms application seems to be more like a general programming question. That is why after further reasearch I have found the following thread that I believe that would be useful: https://stackoverflow.com/questions/68598/how-do-i-drag-and-drop-files-into-an-application 

Once RadTreeView enables the AllowDrop property, you will be able to handle the events provided by the ole-drag-drop API and achieve your goal. Highlighting the node can be achieved by the DragOver event. You can find below a sample code snippet. Note that this is just a sample approach and it may not cover all possible cases. Feel free to modify and extend it in a way which suits your requirements best: 

            this.AllowDrop = true;
            this.radTreeView1.AllowDrop = true;
            this.radTreeView1.TreeViewElement.AllowDrop = true; 
            this.radTreeView1.DragEnter+=radTreeView1_DragEnter;
            this.radTreeView1.DragOver+=radTreeView1_DragOver;
                   

        private void radTreeView1_DragOver(object sender, DragEventArgs e)
        { 
            Point targetPoint = this.radTreeView1.PointToClient(new Point(e.X, e.Y));

            TreeNodeElement nodeElement = this.radTreeView1.ElementTree.GetElementAtPoint(targetPoint) as TreeNodeElement;
            if (nodeElement!=null)
            {
              RadTreeNode  targetTreeNode = nodeElement.Data;
                targetTreeNode.BackColor = Color.FromArgb(255, 212, 120);
                targetTreeNode.GradientStyle = GradientStyles.Solid;


                if (lastNode != null && lastNode!=targetTreeNode)
                {
                    TreeNodeElement loNodeElement = this.radTreeView1.TreeViewElement.GetElement(lastNode);

                    if (loNodeElement != null)
                    {
                        lastNode.BackColor = Color.White; 
                    }
                } 
                lastNode = targetTreeNode; 
            }
        }

     
        private void radTreeView1_DragEnter(object sender, DragEventArgs e)
        {
            e.Effect = e.AllowedEffect;  
        }

If you need any further assistance please don't hesitate to contact me. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik