Capture node, index and level in drag & drop

[David Oliva Paredes]

I have followed your documentation but I am not able to correctly capture the index, order and node to which I drag and drop. Could you help me?

The idea is to persist the treeview values ​​in the database

I attach my example:

https://blazorplayground.syncfusion.com/hNVpZOBKlZrNrldd

[Juan Jose Luna Aleixos]

I have the same problem

[Juan Carlos]

The treeview component has an undesired behavior. The index, order and node values ​​are incorrect when performing drag&drop and that makes it impossible to use the component.

In the previous example this bad behavior is perfectly observed and the use of the Syncfussion treeview component is not recommended at all.

We have spent many hours trying to solve this situation but it is not possible without the help of Syncfussion

Please review the example

https://blazorplayground.syncfusion.com/hNVpZOBKlZrNrldd

and provide a solution

Thank you very much for your interest, Syncfussion

[Juan]

I have the same problem with version 27.1.48 of the treeview component

Thanks for your help

[SureshRajan Alagarsamy]

Hi David & Juan,

We have reviewed your query and understand that you are looking to capture the DropLevel and DropIndex values for the dragged node in the OnNodeDragStop event of the TreeView component.

After reviewing your query, we created a sample based on your requirements. Upon testing, we were able to successfully retrieve the correct DropIndex and DropLevel values in the OnNodeDrop event arguments during the drag-and-drop action.

To assist you further, we have included a video recording demonstrating our testing process and the expected behavior.

Video Recordings : Attached as zip file.

Additionally, we have provided a test sample for your reference.

Sample : Attached as zip folder.

Additionally, regarding your request to capture the node element, we recommend using the Top and Left values from the OnNodeDragStop event. You can then use these values in a JavaScript invocation method to accurately identify and capture the element.

If the provided solution does not fully address your requirements, we kindly request that you share further details with us, which help us to validate the query further and provide you with a prompt solution.

Regards,
Suresh.

Attachment: .Net8WASMTreeView_98ddb1f3.zip

[David Oliva Paredes]

How can I capture the destination node? Because when I try to sort the nodes it doesn't work for me. To be more specific my problem is how do I detect if I'm moving inside a node or just trying to change the order?

[SureshRajan Alagarsamy]

Hi David,

We have reviewed your query regarding the drag-and-drop functionality in the TreeView component. We understand that you want to determine whether a dropped node is placed inside a destination node or as a sibling next to it.

To address your requirement, when you drag and drop a node, you can determine its placement using the DropIndicator argument in the “OnNodeDragStop” event.

1. If the DropIndicator is “e-drop-in,” the dragged node is dropped inside the destination node.
2. If the DropIndicator is “e-drop-next,” the dragged node is placed as a sibling next to the destination node.

Refer to the below code snippet for further reference.

[Index.razor]

 

<SfTreeView @ref="treeview" ID="tree2" TValue="TeamDetails" AllowDragAndDrop="true">

    ……

    <TreeViewEvents TValue="TeamDetails" OnNodeDragStop="dragStop"></TreeViewEvents>

</SfTreeView>

 

@code {

    …..

 

    public async Task dragStop(DragAndDropEventArgs args)

    {

        Console.WriteLine($"Id: {args.DraggedNodeData.Id} - Name: {args.DraggedNodeData.Text} - DropIndex: {args.DropIndex} - DropLevel: {args.DropLevel} - DropIndicator: {args.DropIndicator}");

        if(args.DropIndicator == "e-drop-in")

        {

            Console.WriteLine($"The dragged node: {args.DraggedNodeData.Text} - is dropping DropIndicator: {args.DropIndicator} inside the {args.DroppedNodeData.Text}");

        }

        else if (args.DropIndicator == "e-drop-next")

        {

            Console.WriteLine($"The dragged node: {args.DraggedNodeData.Text} - is dropping DropIndicator: {args.DropIndicator} as a next sibiling to the {args.DroppedNodeData.Text}");

        }

    }

}

We have also attached a sample for your reference.

Sample : Attached as zip folder.

Regards,
Suresh.

Attachment: Net8WASMTreeViewNodeDragStop_1ffa4b5b.zip