Treeview with multiple listview to drag and drop

[Simon Casey]

Hi, I have a single treeview and two or more listview where I can drag and drop from the treeview. How do I separate on which listview an item is dropped from the treeview? Is it possible to do this with the treeview component?

[Shameer Ali Baig Sulaiman Ali Baig]

Hi Simon, 

 

Greetings from Syncfusion support. 

 

Please, refer the following demo link in which we have used two TreeView and a ListView for performing drag and drop among them. 

 

https://blazor.syncfusion.com/demos/treeview/drag-and-drop?theme=bootstrap5 

 

Additional reference: https://blazor.syncfusion.com/documentation/treeview/drag-and-drop 

 

Query: How do I separate on which listview an item is dropped from the treeview? 

 

We suspect your requirement is to prevent dropping tree node into any particular ListView. You can achieve this validating the dropped element id in OnNodeDragStop before node is added with ListView. 

 

Refer the following links to know the arguments of OnNodeDragStop event of TreeView. 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.DragAndDropEventArgs.html#Syncfusion_Blazor_Navigations_DragAndDropEventArgs_Target 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html#properties 

 

Please, let us know if you need any further assistance. 

 

Regards, 

Shameer Ali Baig S. 

 

 

[Stefan Limpert]

Hi Shameer,
i'm dealing with the same request. I copy and paste the drag & drop demo sample in my project, just to analyse the prperties in action.
Here are my results:
JS-Interop throws an error, because "OnDragStopCall" was not found.

await JSRuntime.InvokeAsync<NodeData>("OnDragStopCall", args);

so if i deactivate the JS-Interop call, the DragAndDropEventArgs.Target is always null, so i cannot determine the object to node was dropped in.

my current SF version is 20.3.0.47 on Blazor Server .NET6.

Why did the JSInterop getting error?
Were the properties DropTarget an Target setted by this JS method?

What did i miss?

Regards

Stefan

[Indhumathy Loganathan]

Hi Stefan,

In our demo sample, we have achieved drag and drop between multiple nodes by making an interop call. Check out the below code snippet.

function OnDragStopCall(dragEventArgs) {

    var targetElement = document.elementFromPoint(dragEventArgs.left, dragEventArgs.top);

    var listEle = targetElement.closest(".e-droppable");

    if (listEle && listEle.classList.contains("custom-list")) {

        var id = dragEventArgs.draggedNodeData.id;

        var text = dragEventArgs.draggedNodeData.text;

        return { Id: id, Text: text };

    }

}

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorTreeView-1948285921

The above customization enabled to perform Drag and Drop from TreeView to ListView component. We will add this to our demo section and refresh it in any of our upcoming releases. Check out the shared sample and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Stefan Limpert]

Hi Indhumathy,
it was'nt not  the complete answer, but it leads me to it.
So, thank you for your suggestions.

Regards

Stefan

[Indhumathy Loganathan]

Stefan, We are happy to hear that the provided suggestions were helpful. Please get back to us if you need any further assistance.