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
SIGN IN To post a reply.
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.
UG Documentation –https://blazor.syncfusion.com/documentation/treeview/getting-started/
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
SIGN IN To post a reply.
- 11 Replies
- 5 Participants
- Marked answer
-
PP Pedro Palma
- Jun 23, 2020 10:50 PM UTC
- Feb 22, 2023 12:29 PM UTC