<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);
}
}
} |
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>
|
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
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.