Drag Drop Multiple Items in Blazor TreeView
By default, you can drag one item at time in Blazor TreeView. To enable drag and drop for multiple items, you only need to:
- Set the SelectionMode property to MultiSimple or MultiExtended
- Select multiple items before dragging starts
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo, you can select multiple items by holding CTRL or SHIFT key and left-click items in the TreeView. Next, by holding the left mouse button and dragging the mouse cursor, you can start a drag and drop operation.
Once dragging starts, the drag window will include all previously selected items. However, it will show only small number of items (by default is set to 3), to make sure its size is smaller than component size. At the end, on drop all items that are dragged can drop at target position within the TreeView.
If SHIFT key is hold when items are dropped, instead of original items, a copy of them is created and dropped at target position. This allows you to choose whether you want to move or copy multiple items during drag drop.
In similar way, you can drag drop multiple items from one TreeView to another, or to other Blazor components.
How to Drag and Drop Multiple Items
At first to allow drag and drop to take place, you need to set the AllowDrag and AllowDrop properties to true. This allows you to start drag drop operation on general level in the Blazor TreeView.
To allow drag drop of multiple items, you need to set the SelectionMode property to either MultiSimple or MultiExtended. This allows selection of multiple items in the TreeView, which allows multi drag and drop of selected items.
Handling Drag Over Event during Multi Drag Drop
During drag and drop operation the DragOver and DragDrop events are fired. The difference between single and multi drag drop is in the value of Data property of the event data. When multiple items are dragged, this field holds a reference to an array of all selected items that are dragged, instead of just the last selected one. You need to take this into consideration when you are handling these events in your code. For example:
In code above, at first a check to e.Data property is made to determine whether it is a single object or an array. Depending on this value, you can proceed with the event by adding custom code. You can also set up conditions that when fulfilled will cancel the drag and drop in whole, just by setting the e.Cancel property to true.
For example, you can prevent dragged items to drop over item with Id set to "3" (the "Computer") if the DropPos is 0. This means you cannot drop items as children of this target item. Here is the code for this condition set in DragOver event:
Conclusion
Blazor TreeView component comes with built-in support for multi drag and drop operations. You can select multiple items and drag them over the same TreeView, other TreeViews or components like Grid, TreeGrid, ListBox, ListView or any Blazor component. During drag drop, you can also choose whether you want to move or copy the dragged items at target position.
IntegralUI for Blazor is a library of advanced UI components that includes the TreeView. You can use it to develop web apps in Blazor .NET framework.