Treeview Drag and drop does not allow to drag everything inside a tree? I need to remove the pink bullet styling which appears on drag & drop.

[shweta]

Hi,

I want to achieve three things with treeview drag and drop:

1) Right now I am not able to do this:

A

  B

    C

 

this cannot be dragged to this?:

 

B    //or whatever 

  C   //or whatever 

    A   //or whatever 

I. e. the top most parent should also be able to become the last child node ans vice versa. In short every node on the tree should be draggable and droppable. 

2) I want to remove the pink bullet and the gray box appearing on drag and drop 

3) on drag the whole node should be able to move along with the cursor and on drop it should take the place. something like how HTML 5 elements drag and drop works. 

Please refer the stackblitz below for my treeview structure. you can make modifications there also or answer here.

https://stackblitz.com/edit/angular-treeview-drag-drop

[Ashokkumar Balasubramanian]

Hi Shweta, 

 

Greetings from Syncfusion support. 

 

Query-1: the topmost parent should also be able to become the last child node and vice versa. In short, every node on the tree should be draggable and droppable. 

 

When you tried to drag a parent (topmost node) and drop it to the last-child, here dragging won’t happen. The reason is while dragging a parent node, it will also include all its child nodes. In the end, the drag target and drop target will be the same and so the dragging could not be performed from the topmost level to the last child. This is the default behavior of our component. 

 

Alternatively, you can perform this by dropping the last child as a sibling for the top-most level, after that you can drop that topmost parent as child. 

 

Query-2: I want to remove the pink bullet and the gray box appearing on drag and drop 

 

You can achieve this using the following CSS. 

 

     /*To hide the sibling shown while performing drag and drop*/ 

    /*custom is a cssClass for TreeView*/ 

    .custom .e-sibling { 

        display: none !important; 

    } 

 

Query-3: on drag, the whole node should be able to move along with the cursor and on drop it should take the place. something like how HTML 5 elements drag and drop works. 

 

We can achieve this requirement by using the following CSS. 

 

    .e-treeview.custom.e-drag-item { 

        background-color: transparent; 

    } 

    .e-treeview.custom.e-drag-item .e-icons.e-drop-out::before, .e-treeview.custom.e-drag-item .e-icons.e-drop-in::before, .e-treeview.custom.e-drag-item .e-icons.e-drop-next::before { 

        content: ''; 

    } 

 

Sample: https://stackblitz.com/edit/angular-treeview-drag-drop-4szhep?file=app.component.ts 

 

Please check the above sample and let us know if you need any further assistance on this. 

 

Regards, 

Ashokkumar B. 

[shweta]

Hello Ashokkumar,

Thanks For quick reply. I also would like to know how are you showing and hiding drag drop icons? On drag and drop If a parent becomes child the corresponding icon gets hidden. Can you the please share this functionality code with me? 

for example right now you can see the last child "domain Id" has its icon padding. I dont want that. I want the padding to "domain Id" only if it becomes parent. And same for others. Hope you got my question :) 

you can update the same Sample: https://stackblitz.com/edit/angular-treeview-drag-drop-4szhep?file=app.component.ts 

 

Once again thank you very much!

[Ashokkumar Balasubramanian]

Hi Shweta 

 

Query: how are you showing and hiding drag-drop icons? On drag and drop If a parent becomes a child, the corresponding icon gets hidden. 

 

You can add a custom class to each child node in the drawNode event of treeview in order to differentiate the parent and child nodes. If the node is a child and if it has no expand/collapse icon, then you can adjust the padding for the node using the following code. 

 

  /* Triggers when a node is rendered */ 

    NodeDrawn(args) { 

        var Expandicon = args.node.querySelector('.e-icons.e-icon-expandable'); 

        var Collapseicon = args.node.querySelector('.e-icons.e-icon-collpasible'); 

        if (!(Expandicon || Collapseicon)) { 

            args.node.classList.add('e-custom'); 

        } 

   } 

 

   /* To remove the icon padding */ 

    .e-treeview .e-custom .e-text-content > .e-list-text { 

        margin-left: -25px; 

    } 

 

 

While performing drag and drop operation, you can check and remove the icon padding if the dragged node is dropped as child, in the nodeDragStop event of treeview using the following code. 

 

/*Triggers when a node drag stop */ 

    NodeDragStop(args) { 

        if (args.droppedNode.classList.contains('e-custom') && args.dropIndicator == "e-drop-in") { 

            args.droppedNode.classList.remove('e-custom'); 

            if (!(args.draggedNode.querySelector('.e-icons'))) 

                args.draggedNode.classList.add('e-custom'); 

        } 

    } 

 

 

Also, after performing drag and drop, now the dragged parent node becomes child node. So here we need to remove the icon padding if the draggedParentNode contains no more child node. We can achieve this in the nodeDropped event of treeview using following code snippet 

 

/*Triggers when a node dropped successfully */ 

    NodeDropped(args){ 

        if (!(args.draggedParentNode.querySelector('.e-icons'))) 

            args.draggedParentNode.classList.add('e-custom'); 

        } 

    } 

 

 

Sample: https://stackblitz.com/edit/angular-treeview-drag-drop-weoxsp?file=app.component.ts 

 

Kindly check the above information and let us know if the above provided sample has fulfilled your requirement or not? 

 

Regards, 

Ashokkumar B. 

[shweta]

Hi, 

Thanks for your help. I managed to achieve it by a shorter approach. Just by adding One function. Anyways thanks for your help. 

public onCreate(): void {

    this.tree.getTreeData().forEach(element => {

      const node = this.tree.element.querySelector(`[data-uid="${element.id}"]`);

      if (!element.hasChild || !element.hasOwnProperty('hasChild')) {

        node.classList.add('hasnochildnode');

      } else if (node.classList.contains('hasnochildnode')) {

        node.classList.remove('hasnochildnode');

      }

    });

  }

  public onNodeDropped(): void {

    this.onCreate();

  }

[Ashokkumar Balasubramanian]

Hi Shweta,  

 

We are glad to hear that the problem has been resolved. Please let us know, if you need any further assistance. 

 

Regards, 

Ashokkumar B.