Drag-and-Drop Between GridControl and ListBoxEdit

• Jun 02, 2022
• 2 minutes to read

The GridControl allows dragging records and dropping them in external controls. This topic demonstrates how to implement drag-and-drop between the GridControl and the ListBoxEdit.

The following image shows dragging records to and from the ListBoxEdit:

View Example: How to implement drag-and-drop between the GridControl and the ListBoxEdit

Follow the steps below to implement drag-and-drop between the GridControl and the ListBoxEdit:

1. Add the GridControl and the ListBoxEdit to your project’s window:

   XAML

   <dxg:GridControl Name="gridControl">
      <!---->
      <dxg:GridControl.View>
         <dxg:TableView />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxe:ListBoxEdit Name="listBoxEdit" />
   

2. Activate drag-and-drop operations in the added controls:

   • Set the DataViewBase.AllowDragDrop property to true to enable drag-and-drop in the GridControl.
   • Set the ListBoxDragDropBehavior.AllowDragDrop attached property to true to enable drag-and-drop in the ListBoxEdit.
   XAML

   <dxg:GridControl Name="gridControl">
      <!---->
      <dxg:GridControl.View>
         <dxg:TableView AllowDragDrop="True" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxe:ListBoxEdit Name="listBoxEdit" 
      dx:ListBoxDragDropBehavior.AllowDragDrop="True" />
   

3. Now you can drag records but not drop them in another control. Do the following steps to allow dropping:

   • Handle the DataViewBase.DragRecordOver event on the GridControl.
   • Handle the ListBoxDragDropBehavior.DragRecordOver attached event on the ListBoxEdit.
   • Check dragged data availability. Use the DragEventArgsBase.IsFromOutside property to check whether the dragged record is from another control and the DragEventArgsBase.GetRecordType method to get a record’s type. The code sample below allows you to drop only the Employee data.
   • Determine an operation’s type. Set the DragEventArgsBase.Effects property to DragDropEffects.Move to allow dropping.
   XAML

   <dxg:GridControl Name="gridControl">
      <!---->
      <dxg:GridControl.View>
         <dxg:TableView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxe:ListBoxEdit Name="listBoxEdit" 
      dx:ListBoxDragDropBehavior.AllowDragDrop="True" 
      dx:ListBoxDragDropBehavior.DragRecordOver="OnDragRecordOver" />
   

   C#

   void OnDragRecordOver(object sender, DragRecordOverEventArgs e) {
      if (e.IsFromOutside && typeof(Employee).IsAssignableFrom(e.GetRecordType())) {
         e.Effects = DragDropEffects.Move;
         e.Handled = true;
      }
   }
   

   VB.NET

   Private Sub OnDragRecordOver(ByVal sender As Object, ByVal e As DragRecordOverEventArgs)
       If e.IsFromOutside AndAlso GetType(Employee).IsAssignableFrom(e.GetRecordType()) Then
           e.Effects = DragDropEffects.Move
           e.Handled = True
       End If
   End Sub 
   

4. The controls in the demonstrated example have the same data source type. If data source types are different:

   • Handle the DataViewBase.DropRecord event on the GridControl to modify data that is dragged from the ListBoxEdit.
   • Handle the ListBoxDragDropBehavior.DropRecord attached event on the ListBoxEdit to modify data that are dragged from the GridControl.

   See the DataViewBase.DropRecord event implementation in the Drag-and-Drop Between GridControl and Other Controls topic to learn how to modify the dragged data.