Draging a DIV to the TreeView

5 posts, 0 answers
  1. Marko
    Marko avatar
    9 posts
    Member since:
    Mar 2012

    Posted 15 Mar 2012 Link to this post

    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
  2. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 19 Mar 2012 Link to this post

    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
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Marko
    Marko avatar
    9 posts
    Member since:
    Mar 2012

    Posted 19 Mar 2012 Link to this post

    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
  5. Bozhidar
    Admin
    Bozhidar avatar
    1102 posts

    Posted 22 Mar 2012 Link to this post

    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
    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.
  6. Marko
    Marko avatar
    9 posts
    Member since:
    Mar 2012

    Posted 22 Mar 2012 Link to this post

    Hello Bozhidar,

    Thanks for clearing this up.

    Regards,
    Makro
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017