We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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.

Thread ID:

Created:

Updated:

Platform:

Replies:

147459 Sep 11,2019 11:03 AM UTC Sep 23,2019 07:12 AM UTC Angular 5
loading
Tags: ejTreeView
shweta
Asked On September 11, 2019 11:03 AM UTC

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 [Syncfusion]
Replied On September 12, 2019 09:52 AM UTC

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: ''; 
    } 
 
 
Please check the above sample and let us know if you need any further assistance on this. 
 
Regards, 
Ashokkumar B. 


shweta
Replied On September 13, 2019 11:49 AM UTC

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 :) 

 
Once again thank you very much!

Ashokkumar Balasubramanian [Syncfusion]
Replied On September 16, 2019 11:43 AM UTC

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'); 
        } 
    } 
 
 
 
Kindly check the above information and let us know if the above provided sample has fulfilled your requirement or not? 
 
Regards, 
Ashokkumar B. 


shweta
Replied On September 20, 2019 08:10 AM UTC

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 [Syncfusion]
Replied On September 23, 2019 07:12 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon