Is it possible to disable drop events with the e-drop-in Treeview indicator?

[Syncfusion Support]

Answer:

We can provide a drop indicator argument in OnNodeDragStop event, using which you can prevent the drop action for child nodes.

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

            <TreeViewEvents TValue="MailItem" OnNodeDragStop="nodeDrag">TreeViewEvents> 

            <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded">TreeViewFieldsSettings> 

        SfTreeView>    

 public void nodeDrag(DragAndDropEventArgs args) 

    {      

        // prevent the drop action 

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

        { 

             

            args.Cancel = true; 

        }      

    } 

Find the sample to disable drop events with the e-drop-in Treeview indicator form here.

[Dev]

How can we remove 'drop-in' indicator as it can be very confusing for the user to not have this functionality but still have indicator for that? 

Do you have any property to allow only change order in treeview items, instead of changing the level structure (child/parent) for DropDown functionality?

Attachment: drop_in_indicatortreeview_Blazor_9e3838d5.zip

[SureshRajan Alagarsamy]

Hi Dev,

Based on your query, We have understood your concern and requiremnt. We have bound the 'OnNodeDragged' and 'OnNodeDragStop' events in the SfTreeView control to prevent the 'drop-in' icon from appearing and to prevent dropping of child and parent nodes.

Query 1: To remove the 'e-drop-in' icon, we have checked the OnNodeDragged event arguments and set the value args.cancel as true.

Query 2: Similarly, for preventing child nodes from being dropped, we have compared the drag and drop using the 'e-drop-in' indicator and prevented the drop of that particular node. To prevent parent nodes from being dropped, we have used the HasChildren property in OnNodeDragStop event arguments. When the HasChildren property is true, we set the args.cancel as true and prevent the parent from dropping.

Refer to the below code snippet for further assistance.

Code Snippet :

[Index.razor]

 

<SfTreeView TValue="MailItem" AllowDragAndDrop=true>

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>

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

</SfTreeView>

 

@Code {

    public void dragStop(DragAndDropEventArgs args)

    {

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

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

        {

            args.Cancel = true;

        }

        if (args.DraggedNodeData.HasChildren)

        {

            args.Cancel = true;

        }

    }

 

    public async void nodeDragged(DragAndDropEventArgs args)

    {

        // To remove the ‘drop-in’ icon

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

        {

            args.Cancel = true;

        }

    }

}

 

Check out the attached sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: Treeview_ac28d0ba.zip