Copy Item with Drag and Drop in Blazor TreeView
Drag and Drop allows you to move items during run time from one position to another in the same or between different Blazor components. In some cases, instead of moving the item(s), you may need to create a copy item and place it at target location. In this article you will learn how to create an item copy during drag and drop from one TreeView component to another.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In this demo, you can select an item and start dragging it from component of left to the right. While over the right TreeView, to create an item copy, hold the SHIFT key and release the mouse button. In this way, instead of moving the original item, you have copied the item.
You can also create copies within the same TreeView component, or move/copy items from right to left, in general the functionality is the same.
How to Copy Item during Drag and Drop
When item is dragged, you can choose whether you want to move or create a copy item at target location. Holding the SHIFT key changes the drag and drop action from move to a copy operation. This is only required on drop, when you are sure of the target drop location.
Internally, during a copy operation a deep clone of the item object is created. This includes a copy of all custom data fields set by you. The only change is the Id property that contains a unique identifier for each item. This allows you to have duplicates (in appearance or content) within the same item lists, while still maintaining each item as unique one.
Create a Copy Item on Drop event
The other way to create a copy item is to handle the DragDrop event and cancel the default drag and drop functionality and then add your own custom operation. In this way, by intercepting the drag and drop you can create a copy item manually in your code.
At first, you need to cancel the drag and drop. This is done by setting the Cancel property of drag drop event data to true. Then you can proceed with creating a clone of dragged item. For example:
Because of option to drag multiple items in Blazor TreeView (depending whether multi-selection is enabled), inside the DragDrop event handler you need to check the data object type: is it a list or a single object.
The TreeView component allows you to specify the generic type used as a data model for all items (in this example its named as CustomItem), and then using this type you can check whether dropped items(s) are of the same type prior making conversion.
Then using the CloneItem method, you can create a deep copy of each dropped item. Using this method is important, because it also creates a new Id for all cloned objects. In this way, when item drops in target TreeView, will keep the tree hierarchy in order with no duplicates. Items, original or clones can display the same data, but they will be unique objects.
In this example, items are not added directly to the Items collection, instead the AddItem method is used, which indirectly adds the item to the tree Items property. This method when used will also fire ItemAdding and ItemAdded events.
In this case holding the SHIFT key is not required, because the item clone is created in code. Once the clone object is created, you can add it to the Items collection of the Blazor TreeView and complete the drag drop process.
Add Copy Item to Drop Position Manually
In previous code, clones from all dropped items will appear at the tree end. To add the copy item(s) manually at correct position on drop, you need to use the DropPos and Target properties that are part of the event data.
In this case, you need to create a method that depending on the drop position, use a corresponding method to insert the copied item(s) at correct position within the target tree hierarchy.
These properties can have the following values:
- DropPos - position at which item(s) can drop
- 0 - item drops as a child
- 1 - item drops above target item at same level
- 2 - item drops below target item at same level
- -1 - item drops at the end of the tree hierarchy
- Target - specifies the target item over which dragged item(s) drops
Using these values, you can use specific method to add the clone item to correct position:
The event handled for DragDrop event now looks a little bit different. A list of all cloned items is created and then is provided to the AddItem method above. Then a corresponding TreeView method is called to add the items from the clones list at position specified by the DropPos and Target item.
All Blazor TreeView methods for adding items can accept either a single object or a list.
Conclusion
IntegralUI TreeView comes with built-in support for drag and drop operations that allows you to move or copy items. Creating an item copy during drag and drop is easy; you only need to hold the SHIFT key while item is dropped at target location. In other cases, you can also create an item copy manually in your code.
A sample code is available in C# .NET that shows how to create a copy item with drag and drop in Blazor TreeView. The TreeView component is part of IntegralUI for Blazor that you can use in .NET framework.