Drag and Drop using RadDragDropService
This article will guide you through the process of achieving drag and drop functionality from RadListView to RadGridView and vice versa. For this purpose, we will use the RadDragDropService, supported by both of the controls. Let’s assume that the RadListView is in unbound mode and the ViewType property is set to DetailsView. The RadGridView is bound to a DataTable with identical columns as the manually added ones to the RadListView.
Populating with data
Drag and Drop from RadGridView to RadListView
Figure 1: Drag and Drop from RadGridView to RadListView
1. The first thing we need to do is to start the RadGridView’s drag and drop service when a user clicks on a row with the left mouse down. For this purpose, we should create a custom grid behavior:
Starting a drag and drop operation
2. Next, we should register this behavior in our grid:
Register the custom row behavior
3. It is necessary to subscribe to the PreviewDragStart, PreviewDragOver and PreviewDragDrop events of the grid’s RadDragDropService. The PreviewDragStart event is fired once the drag and drop service on the grid is started. We should notify the service that the drag and drop operation can move forward. In the PreviewDragOver event you can control on what targets to allow dropping the dragged row. The PreviewDragDrop event performs the actual move of the row from the RadGridView to the RadListView.
Handling the RadDragDropService's events
Drag and Drop from RadListView to RadGridView
Figure 2: Drag and Drop from RadListView to RadGridView
1. In order to enable dragging an item from the RadListView and dropping it onto the RadGridView, it is necessary to set the RadListView.AllowDragDrop property to true.
Subscribing to the RadDragDropService's events
2. To implement drag and drop functionality for this scenario, we will use the ListViewElement.DragDropService, which is a derivative of the RadDragDropService . Subscribe to its PreviewDragOver and PreviewDragDrop events. In the PreviewDragOver event allow dropping over a row element or over the table element. The PreviewDragDrop event performs the actual inserting of the dragged item into the RadGridView’s data source: