Restrict dragging to the same level only

[Joseph Tan]

Hi There,

Is there a way to restrict dropping of nodes in a tree view to only the same level? 

In the example below, the user can only drag Promotions within the Categories node, but not above it.

[Sowmiya Padmanaban]

Hi Joseph Tan,  

 

Greetings from Syncfusion support. 

 

You can achieve your requirement by adding the additional data field in the data source of TreeView component and prevent the dragging using OnNodeDragStop event by setting args.cancel as true. 

 

Please refer the below code snippet for the above suggested solution. 

 

<SfTreeView @ref="tree" TValue="MailItem" AllowDragAndDrop="true"> 

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

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" 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 string level { get; set; } 

    } 

protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        MyFolder.Add(new MailItem 

        { 

            Id = "1", 

            FolderName = "Inbox", 

            HasSubFolders = true, 

            level ="level1" 

        }); 

}  

 public void dragStop(Syncfusion.Blazor.Navigations.DragAndDropEventArgs args) 

    { 

        // get the dropped node data 

        var dropped_node = this.tree.GetTreeData(args.DroppedNodeData.Id); 

        //get the dragged node data 

        var dragged_node = this.tree.GetTreeData(args.DraggedNodeData.Id); 

        // compare the drag and drop level and prevent the drop of that particular node. 

        if(dragged_node[0].level != dropped_node[0].level || args.DropIndicator != "e-drop-next" ) 

        { 

            args.Cancel = true; 

        } 

    } 

 

Please, refer the below sample link. 

 

https://www.syncfusion.com/downloads/support/forum/159874/ze/TreeView-1956350229.zip 

 

Please, refer to the below links to know more about the TreeView component. 

 

UG Documentation- https://blazor.syncfusion.com/documentation/treeview/data-binding/#self-referential-data 

 

Demo link- https://blazor.syncfusion.com/demos/treeview/default-functionalities 

 

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

 

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

 

Regards,  

Sowmiya.P 

[Joseph Tan]

Hi There,

So I tried it and at first it didn't work. But after I upgraded to 18.3.50, it did.

This is bleeding edge stuff ! Thanks!

Cheers

Joseph 

[Sowmiya Padmanaban]

Hi Joseph Tan,  

 

Sorry for the inconvenience. 

 

We have resolved the drop event issue ( args.cancel is not working in 18.3.48 ) in our latest patch release(18.3.50). So, we suggest you to use the latest (Syncfusion.Blazor)package version (18.3.50) in your application. 

 

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

 

Regards,  

Sowmiya.P 

[Joseph Tan]

Yep - that did it.

[Sowmiya Padmanaban]

Hi Joseph,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P