Drag-and-Drop Between GridControls

• Jun 02, 2022
• 3 minutes to read

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

The following image shows dragging records between the GridControl with a TreeList View and the GridControl with a Card View:

View Example: How to implement drag-and-drop between GridControls

To Implement Drag-and-Drop Between GridControls

1. Add two GridControls to your project’s window. In the code sample below, the first GridControl has the TreeList View, and the second one has the Card View:

   XAML

   <dxg:GridControl Name="gridControl1">
      <!---->
      <dxg:GridControl.View>
         <dxg:TreeListView />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxg:GridControl Name="gridControl2">
      <!---->
      <dxg:GridControl.View>
         <dxg:CardView />
      </dxg:GridControl.View>
   </dxg:GridControl>
   

2. Set the DataViewBase.AllowDragDrop properties to true in the added GridControls to enable drag-and-drop operations:

   XAML

   <dxg:GridControl Name="gridControl1">
      <!---->
      <dxg:GridControl.View>
         <dxg:TreeListView AllowDragDrop="True" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxg:GridControl Name="gridControl2">
      <!---->
      <dxg:GridControl.View>
         <dxg:CardView AllowDragDrop="True" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   

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

   • Handle the DataViewBase.DragRecordOver events on the both GridControls.
   • 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="gridControl1">
      <!---->
      <dxg:GridControl.View>
         <dxg:TreeListView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   
   <dxg:GridControl Name="gridControl2">
      <!---->
      <dxg:GridControl.View>
         <dxg:CardView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" />
      </dxg:GridControl.View>
   </dxg:GridControl>
   

   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 
   

To Implement Drag-and-Drop Between GridControls with Different Item Types

The GridControls in the example above have the same data source’s type. The following code sample shows GridControls with data sources of different types:

Xaml

<dxg:GridControl ItemsSource="{Binding Items}" />
<dxg:GridControl ItemsSource="{Binding Items2}" /> 

C#

public class Employee1 {
    public int Id { get; set; }
    public string Name { get; set; }
    //...
}
public class Employee2 {
    public int Id { get; set; }
    public string Name { get; set; }
    //...
}
//...
public ObservableCollection<Employee1> Items { get; set; }
public ObservableCollection<Employee2> Items2 { get; set; } 

VB.NET

Public Class Employee1
    Public Property Id As Integer
    Public Property Name As String
End Class

Public Class Employee2
    Public Property Id As Integer
    Public Property Name As String
End Class

Public Property Items As ObservableCollection(Of Employee1)
Public Property Items2 As ObservableCollection(Of Employee2) 

In this case, in addition to Steps 1-3 from the tutorial above, handle the DataViewBase.DropRecord event to convert dragged items to the target GridControl’s data source type:

Xaml

<dxg:GridControl Name="gridControl2">
   <!---->
   <dxg:GridControl.View>
      <dxg:CardView AllowDragDrop="True" DragRecordOver="OnDragRecordOver" DropRecord="OnDropRecord" />
   </dxg:GridControl.View>
</dxg:GridControl>

C#

void OnDropRecord(object sender, DropRecordEventArgs e) {
    if (e.Data.GetDataPresent(typeof(RecordDragDropData))) {
        var data = (RecordDragDropData)e.Data.GetData(typeof(RecordDragDropData));
        var newRecords = data.Records.OfType<Employee1>().Select(x => new Employee2 { Id = x.Id, Name = x.Name }).ToArray();
        if (newRecords.Length > 0) {
            DataObject dataObject = new DataObject();
            dataObject.SetData(new RecordDragDropData(newRecords));
            e.Data = dataObject;
        }
    }
}

VB.NET

Private Sub OnDropRecord(ByVal sender As Object, ByVal e As DropRecordEventArgs)
    If e.Data.GetDataPresent(GetType(RecordDragDropData)) Then
        Dim data = CType(e.Data.GetData(GetType(RecordDragDropData)), RecordDragDropData)
        Dim newRecords = data.Records.OfType(Of Employee1)().[Select](Function(x) New Employee2 With {
            .Id = x.Id,
            .Name = x.Name
        }).ToArray()

        If newRecords.Length > 0 Then
            Dim dataObject As DataObject = New DataObject()
            dataObject.SetData(New RecordDragDropData(newRecords))
            e.Data = dataObject
        End If
    End If
End Sub