Problems on Drag and drop with treeView

Posted by: javieragr99 on 21 August 2018, 1:09 pm EST

  • Posted 21 August 2018, 1:09 pm EST


    Hi team I have two questions.
    1.- How can I detect when the drag item is over the node and when is under the node, like the gif. I see the event and both cases the 'dropTarget' are the same (level, nodes and parentNode)
    (level:0
    nodes:null
    parentNode:null)
    .

    2.-The other is , Im using the event drop but drop event, I just have the item on 'dataItem', but the item does not exist yet on the droptarget until the event ends, so I need to get the tree with the new node updated before the event ends, or wich event I need to use?

  • Marked as Answer

    Replied 22 August 2018, 5:27 am EST

    Hi,

    1). To detect the position relative to the target node, you may use ' position ' property of TreeNodeDragDropEventArgs.
    Please refer to the following code snippet:-
    treeView.dragOver.addHandler((s, e)=>{
    let pos;
    switch(e.position){
    case 0: post="Before";break;
    case 1: post="After";break;
    case 2: post="Into";break;
    }
    //do something with the position
    });

    2). You may update the dataItem from dragSource and then call dropTarget.treeView.loadTree() on setTimeout() to let the drop event finish first before updating the tree. This way tree will be loaded with the modified value.

    Please refer to the following sample which implements the same:-
    https://stackblitz.com/edit/js-vgs3dl?file=index.js

    ~Sharad
  • Replied 22 August 2018, 1:39 pm EST

    Thank you so much, it has been very helpful.
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels