We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Drag drop of multiple nodes only shows one node in args

Hi,
When i drag multiple nodes in the treeview only one node is processed.
So it looks like all the nodes are dragged but from the NodeDragged event listener only one node shows. Not a list of nodes.

[CODE]
protected async Task NodeDragged(DragAndDropEventArgs args)
{
//only access to one of the dragged nodes here
}
[/CODE]

Also i cannot access the TValue class from the NodeDragged event. So all my TValue class items are not available. Should this be the case as i am setting TValue in the treeview.

Thanks

5 Replies

MK Muthukrishnan Kandasamy Syncfusion Team March 6, 2020 11:06 AM UTC

 
Thanks for contacting Syncfusion support. 
 
In Syncfusion Blazor TreeView component,  OnNodeDragged event only returns the single node data. This is our default behavior of OnNodeDragged event in TreeView component. For achieving your requirement you can get the Tree node data using GetTreeData method of TreeView component by passing selected node id’s of tree nodes.  
 
Use SelectedNodes property to get the selected node id’s, but currently we are having issue with in SelectedNodes property.  
The fix for this issue will be included in the upcoming volume release which is will be rolled out end of March 2020. 
 
Once, the fix is included we will provide the solution to meet your requirement. Please be patience until then. 
 
Regards, 
Muthukrishnan K 



SP Sowmiya Padmanaban Syncfusion Team April 6, 2020 10:45 AM UTC

Hi Fergus, 
 
We are glad to announce that our Essential Studio 2020 Volume 1 release v18.1.0.42  is rolled out and is available for download under the following link. 
 
 
As promised, We have included a fix for “Maintain Selected Item in OnNodeDragged event”. To access this fix, update your (Syncfusion.Blazor) NuGet package to the latest version (V18.1.0.42). 
 
Refer the below code snippet. 
    public async Task drag(DragAndDropEventArgs args) 
    { 
        // Get the selected Node id. 
        var value = this.tree.SelectedNodes; 
        // Fetch the full node details. 
        var NodeDetails = await this.tree.GetTreeData(value[0]); 
    } 
 
Refer the below screenshot. 
 
 
 
 
Refer the sample link below. 
 
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
 
 
Regards,  
Sowmiya.P 



SP Scott Peal April 12, 2020 08:28 PM UTC

Just downloaded the project and it fails on line 18 as value[0] is null


        var NodeDetails = await this.tree.GetTreeData(value[0]);

I discovered the reason. If the user doesn't click the node before dragging, value will be empty. If the user does click a node and drags the value works. 

Shouldn't the API auto-select the dragged node and set it to IsSelected?

VR Architect


SP Scott Peal April 12, 2020 08:44 PM UTC

Here is some work around code:

    public async Task drag(DragAndDropEventArgs args)
    {
        List<MailItem> NodeDetails = new List<MailItem>();

        // Get the selected Node id.
        var value = this.tree.SelectedNodes;
        if (value == null)
        {
            // In case the user didn't select the node before drag
            var node = MyFolder.Where(x => x.Id == int.Parse(args.DraggedNodeData.Id)).First();
            NodeDetails.Add(node);
        }
        else
        {
            // Fetch the full node details.
            NodeDetails = await this.tree.GetTreeData(value[0]);
        }
    }


SP Sowmiya Padmanaban Syncfusion Team April 13, 2020 11:57 AM UTC

Hi Scott ,  
 
We have checked your reported problem that TreeView nodes are not automatically selected in NodeDragged event. We would like to let you know that the dragged node will not be selected automatically. As it will remove the selection from the already selected node. 
 
We have checked your attached solution for getting node details without selecting the node while dragging. In this case, you can fetch the nodeDetails by passing the dragged node id to the getTreeData() method. 
 
   if ( value == null) 
       { 
            var NodeDetails = await this.tree.GetTreeData(args.DraggedNodeData.Id); 
        } 
        else 
        { 
            var NodeDetails = await this.tree.GetTreeData(value); 
        } 
 
When you drag a node while another node is in selected state, your attached (above) solution might not work properly. To resolve this problem,  you need to check the dragged node does not contain the “e-active” class. Because, we have added the “e-active” for selected nodes in TreeView component. Refer the below code snippet. 
 
    public async Task drag(DragAndDropEventArgs args) 
    { 
        var value = this.tree.SelectedNodes; 
        // Get the dragged node ClassList. 
        var dragNodeClass = await args.DraggedNode.GetClassList(); 
        // If the classlist contain e-active class, it means the node is in selected state 
        foreach (string s in dragNodeClass) 
        { 
            if(s =="e-active") 
            { 
                count = 1; 
            } 
        } 
        // Check the dragged node is not in the selected state 
        if ( value == null || count == 0) 
        { 
            // Fetch the dragagedNode details. 
            var NodeDetails = await this.tree.GetTreeData(args.DraggedNodeData.Id); 
        } 
        else 
        { 
            var NodeDetails = await this.tree.GetTreeData(value); 
            count = 0; 
        }  } 
 
For your reference, we have prepared a sample. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon