Drag and drop between two trees

This is my first contact with SyncFusion.

I need an example to build two item trees, where I can populate a tree with the data from the other tree, without removing the data from the source tree.

thank you,

Pedro Palma
Brasil



11 Replies 1 reply marked as answer

SP Sowmiya Padmanaban Syncfusion Team June 25, 2020 08:56 AM UTC

Hi Pedro,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with TreeView component. You can achieve your requirement by using onNodeDragged event. We can prevent the drag and drop operations by setting args.cancel as true in the onNodeDragged event, so the dragged node will not be removed from the TreeView.  
 
Also, arguments(args) of onNodeDragged will contain the dragged node data and target node data, you can add the dragged node data as child to target node of another tree using AddNodes method. 
 
You can add the htmlAttributes in TreeView’s data source for identifying the target tree using the onNodeDragged event. 
 
Refer the below coed snippet. 
 
<SfTreeView TValue="MailItem" AllowDragAndDrop="true" @ref="tree"> 
                <TreeViewEvents TValue="MailItem" OnNodeDragged="nodeDrag"></TreeViewEvents> 
                <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" HtmlAttributes="htmlAttribute" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 
            </SfTreeView>   
public class MailItem 
    { 
        public string Id { get; set; } 
        public string ParentId { get; set; } 
        public string FolderName { get; set; } 
        public bool Expanded { get; set; } 
        public bool HasSubFolders { get; set; } 
        public  Dictionary<string, Object> htmlAttribute { get; set; } 
        public string value { get; set; } 
    } 
     MyFolder.Add(new MailItem 
        { 
            Id = "1", 
            FolderName = "Inbox", 
            HasSubFolders = true, 
            htmlAttribute  = new Dictionary<string, Object>() {{ "class" , "tree_1"} }, 
            value ="1" 
        }); 
public async Task nodeDrag(DragAndDropEventArgs args) 
    { 
       // Get the Dragged node details declared in the datasource. 
        var draggedNode =  await this.tree.GetTreeData(args.DraggedNodeData.Id);    
        string[] classlist = await args.DroppedNode.GetClassList(); 
        foreach (string x in classlist) 
        { 
            // Check the dropped tree contains the class. Check if it is another tree or not. 
            if( x == "tree_2") 
            {   
                // It prevents the node removal from Dragged tree. 
                args.Cancel = true; 
                // add the draggged node in another tree by using addNodes method.  
                await this.tree1.AddNodes(draggedNode, args.DroppedNodeData.Id); 
            } 
        } 
    } 
 
 
Refer the sample link below. 
 
 
Refer the below link to know more about the TreeView component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Sowmiya.P 


Marked as answer

PP Pedro Palma June 25, 2020 03:57 PM UTC

Wow !!!

I feel comfortable to rate 1000 for the support, fantastic. I have never had such a fast, effective and perfect support.
This is my first contact with SyncFusion components.
I am starting the conversion of a small Silverlight project to Blazor, in order to train and get to know Blazor better, and I started to research an interface for the user.
I can say that the first help requested, I was very well attended and very clearly in the expected result.

Thank you very much for your attention,

Pedro Palma
Brazil


SP Sowmiya Padmanaban Syncfusion Team June 26, 2020 04:22 AM UTC

Hi Pedro, 
  
Most Welcome. We are happy to hear that our solution meets your requirement. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 



JA Jacky November 25, 2020 10:59 AM UTC

Hi Sowmiya  ,

Can this Sample work for v18.3.0.51 , I build it and got the error.

thank you,

Jacky



SP Sowmiya Padmanaban Syncfusion Team November 26, 2020 03:48 PM UTC

Hi Jacky,  
  
We have checked your reported problem with TreeView component. We have included some breaking changes in TreeView component after volume 3 release(18.3.35). 
  
Please, refer the release notes below. 
  
  
For your reference, we have prepared a sample for your requirement in the version(18.3.51). 
  
After Volume 3 release(18.3.35), we have provided a provided a Dynamic value changes support for TreeView component. You can directly add and remove the data from datasource of TreeView component. 
  
Refer the below code snippet. 
  
   public async Task nodeDrag(DragAndDropEventArgs args) 
    { 
        // Get the Dragged node details declared in the datasource. 
        var draggedNode = this.tree.GetTreeData(args.DraggedNodeData.Id); 
        var classname = await JSRuntime.InvokeAsync<bool>("treeview", args.Top, args.Left); 
        if (classname) 
        { 
            // Get the dropped node details declared in the datasource. 
            var droppednode = this.tree1.GetTreeData(args.DroppedNodeData.Id); 
            args.Cancel = true; 
            if (!droppednode[0].HasSubFolders) 
            { 
                droppednode[0].HasSubFolders = true; 
            } 
            MyFolder1.Add(new MailItem1 
            { 
                Id = this.Count.ToString(), 
                ParentId = droppednode[0].Id, 
                FolderName = draggedNode[0].FolderName, 
                htmlAttribute = new Dictionary<string, Object>() { { "class", "tree_2" } }, 
  
            }); 
            this.Count = this.Count + 1; 
        } 
    } 
  
Host.cshtml 
  
  <script> 
        function treeview(top, left) {           
            var classname = document.elementFromPoint(left, top).closest("li").classList.contains("tree_2"); 
            return classname;         
        } 
    </script> 
  
  
Please, refer the sample link below. 
  
  
Please let us know, if you need any further assistance. 
  
Regards,  
Sowmiya.P 



JA Jacky November 28, 2020 12:00 AM UTC

Hi Sowamiya, 

Awesome!!

Thank you so much for your quick reply and provide the sample code which really helps me a lot.

I will give you further information after integrate and test

Have a very nice day !


Best regards,
Jacky


SP Sowmiya Padmanaban Syncfusion Team November 30, 2020 04:34 AM UTC

Hi Jacky,  
  
Thanks for the update. 
  
We will wait to hear from you. 
  
Regards,  
Sowmiya.P 



JA Jacky November 30, 2020 08:32 AM UTC

Hi Sowmiya,

It can work , Thank you again for your solution!

Best Regards ,

Jacky




SP Sowmiya Padmanaban Syncfusion Team November 30, 2020 09:06 AM UTC

Hi Jacky,  
  
We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 
  
Regards,  
Sowmiya.P 



AA Adnan Ali February 17, 2023 06:12 AM UTC

Can i get really quick help! What if we have more then 2 trees, I mean i'm creating 5 to 6 Trees with a loop and i want to enable Drag and drop nodes between them



SA SureshRajan Alagarsamy Syncfusion Team February 22, 2023 12:29 PM UTC

Hi Adnan,


Based on your query, we understand that you are looking for a solution for enabling drag and drop action between multiple TreeView components. We have created a sample that addresses your requirement. In this sample, we have rendered five TreeView components and enabled drag and drop action between them by making an interop call in the ‘OnNodeDragStop’ event.


Check out the attached sample and get back to us if you need any further assistance.


Regards,
Suresh.


Attachment: TreeView_7b66bb9e.zip

Loader.
Up arrow icon