Draging a DIV to the TreeView

[Marko]

Hello,

What I will need is this. On the page I have one RadTreeView control, on the same page I can have HTML DIV element. Is it possible, somehow to drag this DIV element to the RadTreeView control and get server side event?

This is very similar, or even identical to functionality you have on FileExplorer / First Look example where you can drag table rows to the tree and move files by doing so.

Thanks!
Marko

[Bozhidar]

Hi Marko,

You can use javascript to handle the drag/drop events of the div tag and add a node to the TreeView using its ClientSide Api. You didn't specify exactly what event do you want, but in general when using the TreeView's drag and drop, the events are raised on the TreeView that is the source of the drag, rather than the destination. So in your case you won't be able to use the built in events. 
 
Kind regards,
Bozhidar
the Telerik team

[Marko]

Hello,

Thank you for your answer!
I checked the ClientSide Api, but couldn't find solution to my problem.

I will try to describe the problem in more detail. This is the desired flow of actions:
1. User selects some DIV and drags it to the tree view.
2. Once user hovers over with the DIV over some node this node needs to be selected. 
3. If user drops this DIV on the tree node it's enough to have some client side event fired (like DIV dropped on node ID: x).

So, there are two solutions that I see at the moment.
1. Tree view fires some client/server side event when DIV is dropped on to it.
2. I fire an event from my code when DIV is dropped on to some selected node, in which case I need to know if DIV is located over some node at the moment of dropping.

Again, I would like to say that this is exactly the same functionality as on the FileExplorer / First Look example, so I guess you guys already implemented it.

Thanks
Marko

[Bozhidar]

Hello Marko,

Thank you for getting back to us.

The FileExplorer uses several controls internally. If fact what you observe there isn't drag and drop between a div and a TreeView, but between a Grid and a TreeView, as the FileExplorer uses a RadGrid internally to display the files and folders on the right side. You can see how that can be implemented in the following article:
http://www.telerik.com/community/code-library/aspnet-ajax/general/drag-and-drop-between-radgrid-and-radtreeview.aspx 

If you want to implement a drag and drop functionality between a div and some other element, you can use our KendoUI controls. They also expose all the events that you need in a drag/drop scenario. You can see the controls in action in the following demo:
http://demos.kendoui.com/web/dragdrop/index.html 
 
Regards,
Bozhidar
the Telerik team

[Marko]

Hello Bozhidar,

Thanks for clearing this up.

Regards,
Makro