Drag nodes outside treeview

6 posts, 1 answers
  1. Denis
    Denis avatar
    9 posts
    Member since:
    Jun 2012

    Posted 30 Aug 2012 Link to this post

    I make a simple treeview with some nodes and drag/drop possibility. Drag/drop working fine inise treeview and between nodes.
    But, I can't drag node outside treeview. For example, I want drag nodes (=gather information about nodes) into DIV element.
    I set handler for "drag" event, but this handler empty and don't modify node state. However, I can't drag node into external DIV at same page - node status automatically set like "k-denied".

    How I can correct this behaviour? Is this by design or my mistake?
  2.
  3. Dimo
    Admin
    Dimo avatar
    8486 posts

    Posted 03 Sep 2012 Link to this post

    Hello Denis,

    The built-in TreeView drag-n-drop functionality is not designed to support random drop targets. What you can do is disable the TreeView's drag-n-drop and use the same standalone functionality with its events and abilities.

    All the best,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Answer
    Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 03 Sep 2012 Link to this post

    I think there is a solution (just did it the same way):
    In the drag-Event you can check if the dropTarget is your div and then you set the StatusClass to 'k-add'

    function onDrag(e)
    {
        if (e.dropTarget.className == "dropDiv")
        {
            e.setStatusClass("k-add");
        }
    }


    Don't forget adding your div the class.
  7. Monish
    Monish avatar
    4 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    Hi,

    I have similar kind of requirements - Need to drop a node from the treeview on the editor control. However, the editor might be initially empty - without any text or markup. User can start typing in the editor and wherever required will drop the node within editor.
    As per Mathias's solution, I need to have a div with some class within the editor - which might not be the case. I might not have that div in the editor.

    How can I achieve the functionality? Is it required to have a div / span (with certain class) where I will drop the node?

    Regards,
    Monish.
  8.
  9. Mathias
    Mathias avatar
    34 posts
    Member since:
    Apr 2012

    Posted 14 Sep 2012 Link to this post

    Hmmm... the editable area in an editor still has its own class. Its called "k-editable-area". So you can try the following:
    function onDrag(e)
    {
    if (e.dropTarget.className == "k-editable-area")
    {
    e.setStatusClass("k-add");
    }
    }


    But this code just sets the add-Symbol on the drag-element as soon as its hovering the editor. To fill the editor with the nodes text or whatever, you need to use the drop-event and... do whatever you wanna do ^^
  11. Denis
    Denis avatar
    9 posts
    Member since:
    Jun 2012

    Posted 15 Sep 2012 Link to this post

    You right! setStatusClass("k-add") working fine and UI look nice. Also, "drop" event occured as planned. Thanks!
Back to Top