RadzenTree drag and drop not working

Radzen.Blazor Components
1

I follow the demo of RadzenTree. I can drag the tree node item to overlap on the other items in the tree view. When I drop the node to the other parent item, the view didn't change. The dragged node is not moved to the new parent.

radzentree

<RadzenTree Style="height: 600px" Data=@departments ItemRender="ItemRender">
    <RadzenTreeLevel TextProperty="Name" ChildrenProperty="Departments"
                     Expanded=@(e => true) HasChildren=@(e => ((Department)e).Departments?.Any() == true)>
    </RadzenTreeLevel>
</RadzenTree>

@code {
    IEnumerable<Department> departments;
    Department selectedDepartment;
    object selectedTreeItem;

    protected override async Task OnInitializedAsync()
    {        
        departments = await useCases.GetDepartmentsAsync();
    }


    bool ShouldExpand(object data)
    {
        var dept = data as Department;

        return dept == null ? false : dept.Departments.Any();
    }

    Department draggedItem;
    void ItemRender(TreeItemRenderEventArgs args)
    {
        var department = (Department)args.Value;

        // Allow drag of all items except the root item.
        if (department.ParentDepartmentId > 0)
        {
            args.Attributes.Add("title", "Drag item to reorder");
            args.Attributes.Add("style", "cursor:grab");
            args.Attributes.Add("draggable", "true");
            args.Attributes.Add("ondragstart", EventCallback.Factory.Create<DragEventArgs>(this, () =>
            {
                if (draggedItem == null)
                {
                    draggedItem = department;
                }
            }));
        }

        // Allow drop over any item including the root item.
        args.Attributes.Add("ondragover", "event.preventDefault()");
        args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, () =>
        {
            if (draggedItem != null && draggedItem.ParentDepartmentId != department.Id)
            {
                draggedItem.ParentDepartmentId = department.Id;
                draggedItem = null;
            }
        }));
    }
}
2

Not sure why it's not working for you, try to debug your implementation and compare it to our demo where the same works normally:

3

I'm in the process of trying to get drag and drop working as well. It works if I call SaveChanges on the dbContext as shown in the documentation, but if I remove that line, it does not work. I'd be happy to compare notes to try to get this working.

(Calling SaveChanges every time is causing issues with concurrent operations on the same dbContext. I'm not sure exactly when that error gets thrown, so I'm looking for a way of keeping track of things in the context and saving it through a separate process/button.)

4

I figured out how to get rid of that error with concurrent operations on the same context. Just make sure to call SaveChanges instead of SaveChangesAsync.

It would still be nice to be able to modify the tree without saving until a save button is clicked. I got as far as discovering that updating the parent id does not update the parent or children navigation properties, which the tree view relies on to update. Saving the dbContext takes care of updating the navigation properties. I've tried setting the parent directly and adding directly to the children, but haven't gotten it working yet.

5

Sorry for the chain of responses... I figured out how to get it working without calling SaveChanges every time.

  1. Change the children collection on your class to an ICollection
  2. Add a Parent navigation property to your class
  3. In addition to updating the parent id on drop, remove the item from its parent's children collection and add it to the target children collection. For example, using the documentation:
args.Attributes.Add("ondrop", EventCallback.Factory.Create<DragEventArgs>(this, () =>
{
    if (draggedItem != null && draggedItem.ReportsTo != employee.EmployeeID)
    {
        draggedItem.ReportsTo = employee.EmployeeID;
        draggedItem.Parent.Children.Remove(draggedItem); // Remove from parent's children
        employee.Employees1.Add(draggedItem); // Add to target's children
        draggedItem = null;
    }
}));

Note that this doesn't work if you want to be able to drag and drop root level items. In that case, you'll have to add/remove the item from the root level items manually (change the private employees variable into a collection and add/remove to that if parent is null).