New to Telerik UI for Blazor? Download free 30-day trial

It is not possible to drop item to empty TreeView

Environment

Product TreeView for Blazor

Description

It seems it is not possible to drop item to empty TreeView.

How can I drop items into a TreeView that is empty?

Steps to Reproduce

  1. Go to the TreeView Drag and Drop demo: https://demos.telerik.com/blazor-ui/treeview/drag-drop
  2. Remove all the nodes from the second TreeView (the drop target), for example, by dragging them to the first TreeView.
  3. Try to drag a node to the now empty TreeView.

Possible Cause

When there is no data in the TreeView, you can't drop items into it because it does not render anything and so there is no drop target.

Solution

Ensure you always have at least one dummy node with text like "(empty)" or "(drag here)" so there is a drop target.

When processing the data in the OnDrop event, consider checking if this is the target (only) item and if so - removing it from the data source you will build, so that newly added data will have its proper structure and that placeholder item will now be gone.

In this article