1. Home
  2. Forum
  3. Blazor
  4. Prevent Drop in TreeView as new children

Prevent Drop in TreeView as new children

Hello, I am working on a Blazor Server Side application and I have a couple of issues with the TreeView.

Question 1.
In my application I want allow drag and drop only for reordering, so moves are allowed only between siblings.
By example:

Parent
>Child 1
>Child 2
>Child 3

Child 3 could take place of the other kids but not move underneath them or be moved at the same level of its Parent.
I want to allow only Children displacement on the same level. 
What I noticed is that many times moving a child creates new parents:
E.g.

Parent
>Child 1
>Child 2
>>Child 3

As you can see Child 2 becomes parent of Child 3.
This is absolutely not justified by any of the element of the hierarchy that I am providing to the tree.
I am trying to capture the events with something like this:

```
private async Task OnNodeDragStop(DragAndDropEventArgs args)
// sometimes the dropped node is null???, also exclude drops on itself
if (args.DroppedNodeData == null || args.DropIndicator == "e-drop-out" || args.DropIndicator == "e-drop-in" || args.DropIndicator == null)
{
    args.Cancel = true;
    return;
}
...
}
```

It works most of the time but some times the issue still happens. 
Again, this has to be from a native behavior of the component as my structure does not allow children of children.

Question 2.
Sometimes the DropIndicator is null. Why would that ever happen?

Question 3.
I would like the tree to be expanded by default. I try to call the ExpandAll() on the reference to the object
await treeViewRef.ExpandAll();
But most of the time this fail as a NullReference exception from inside the method (the treeViewRef is instantiate correctly).
What can possibly be the cause of this? When is a good time to call the ExpandAll()? Is there any better way to do this?

Thank you


10 Replies
MK Muthukrishnan Kandasamy Syncfusion Team April 8, 2021 01:09 PM UTC


Hi Bax, 
 
Thanks for contacting Syncfusion support. 
 
Query 1: In my application I want allow drag and drop only for reordering, so moves are allowed only between siblings 
 
We have validated your requirement in TreeView component, and we suspect that you requirement is to prevent adding dragged nodes as child for any tree node. Instead you want to sort the tree nodes while drag and drop. We can prevent the tree node to be added as child through nodeDragStop event. For this requirement, we can check whether the dragged item contains the e-drop-in (for child) class or e-drop-next (for sibling) class, based on that we can prevent the drop functionality. Please refer to the below code block.  
 
public static void nodeDragStop(DragAndDropEventArgs args) 
    { 
        // prevent the drop action  
        if (args.DropIndicator == "e-drop-in" || args.DraggedNodeData.ParentID != args.DroppedNodeData.ParentID) 
        { 
            args.Cancel = true; 
        } 
    } 
 
You can customize the above condition based on your scenario. 
 
Query 2: Sometimes the DropIndicator is null. Why would that ever happen? 
 
We were unable to reproduce the reported problem in our end, please check the attached sample. If the issue still persists, please replicate your reported issue in the attached sample. 
 
Query 3: I would like the tree to be expanded by default. 
 
We have validated this issue, but we were unable to reproduce the null reference exception at our end. We have expanded all nodes by using ExpandAll method in the Created event of TreeView component. Please refer to the below code block. 
 
public async Task onCreated(ActionEventArgs args) 
    { 
        await treeRef.ExpandAll(); 
    } 
 
Please ensure whether ExpandAll is executed before the component is rendered in your end which may cause the reported issue.  
 
We have prepared a sample application to meet your requirements, which can be downloaded from the below link. 
 
 
Please refer to the below links to know more about TreeView component. 
 
 
 
 
Please let us know if you need further assistance.  
 
Regards, 
Muthukrishnan K 



BA BAx April 8, 2021 03:35 PM UTC

Hello Muthukrishnan,
Thanks for the hints.

However, I am able to replicate the exact issues I reported with the test case you provided.

Query 1: In my application I want allow drag and drop only for reordering, so moves are allowed only between siblings 

I attached a  screenshot of what I get after moving siblings around for a few times.
Please note, I made no change to your code.

Query 2: Sometimes the DropIndicator is null. Why would that ever happen?
I am surprised that never happened to you. If I just edit your DragStop procedure to this I hit a breakpoint on the WriteLine in no time.

    public static void nodeDragStop(DragAndDropEventArgs args)
    {
        // prevent the drop action 
        if (args.DropIndicator == "e-drop-in" || args.DraggedNodeData.ParentID != args.DroppedNodeData.ParentID)
        {
            args.Cancel = true;
        }
        if (args.DropIndicator == null)
        {
            Console.WriteLine("NULL");
        }
    }

Query 3: I would like the tree to be expanded by default. 
Thank you, I will try it out.




Attachment: syncfusionsupporttreeviewchildren_5bf510db.zip

SS Sharon Sanchez Selvaraj Syncfusion Team April 9, 2021 12:54 PM UTC

Hi BAx, 
 
Currently we are validating the reported scenarios in our end. We will update you further details within three business days on April 14th , 2021. 
 
We appreciate your patience. 
 
Regards, 
 
Sharon Sanchez S. 


BA BAx April 9, 2021 01:30 PM UTC

Thank you Sharon.
To facilitate, I also attach recording of the issues I am experiencing. 
This from executing the sample you posted in the precedent post in this thread.


Attachment: demos_1705a496.zip

KR Keerthana Rajendran Syncfusion Team April 12, 2021 12:23 PM UTC

Hi Alessio, 
  
Thanks for sharing the video.  
  
Currently we are validating your scenario with the provided particulars. We will update you the details on April 14, 2021 as promised earlier. 
  
Regards, 
Keerthana.  


SS Sharon Sanchez Selvaraj Syncfusion Team April 14, 2021 02:14 PM UTC

Hi BAx, 
 
Thanks for your patience.  
 
We checked with your videos and also with the reported queries. To resolve the exception thrown and with the Drop Indicator reported as NULL, please add the following condition to the statement. 
 
if (args.DroppedNodeData != null) 
        { 
            if (args.DropIndicator == "e-drop-in" || args.DraggedNodeData.ParentID != args.DroppedNodeData.ParentID) 
            { 
                args.Cancel = true; 
            } 
            if (args.DropIndicator == null) 
            { 
                System.Console.WriteLine("NULL"); 
            } 
        } 
 
We have considered “the restriction of the siblings issue” as a bug from our end. The fix for this issue will be included in Volume 1, 2021 SP1 release which is expected to be rolled out by the month of May, 2021. 
 
Please track the below feedback link to know the status of the issue. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 
 


BA BAx April 29, 2021 10:51 AM UTC

Query 3: I would like the tree to be expanded by default. 
This works well when opening a new page - all the nodes are expanded.
However if I update the DataSource, the new nodes will not be expanded by default.

SS Sharon Sanchez Selvaraj Syncfusion Team April 30, 2021 03:39 PM UTC

Hi BAx, 
 
We have created a sample based on your requirement. We have added the nodes via button click and have expanded the nodes by invoking ExpandAll method.  
 
Please refer to the code snippet. 
 
  public async Task click() 
    { 
        List<TeamDetails> EmployeeDetails = new List<TeamDetails>(); 
        Team.Add(new TeamDetails 
        { 
            Id = "09", 
            Name = "New Item", 
            Children = EmployeeDetails, 
        }); 
        EmployeeDetails.Add(new TeamDetails 
        { 
            Id = "09-01", 
            Name = "Child Item" 
        }); 
        await Task.Delay(1000); 
        await treeRef.ExpandAll(); 
        StateHasChanged(); 
 
    } 
 
Refer to the sample. 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
 
Sharon Sanchez S. 


DE Dev February 16, 2023 02:25 PM UTC

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


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


Attachment: drop_in_indicatortreeview_Blazor_b344e5c5.zip

SA SureshRajan Alagarsamy Syncfusion Team February 21, 2023 07:21 AM UTC

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_45579801.zip

Loader.
Up arrow icon