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

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 :
Set the DataViewBase.AllowDragDrop properties to true in the added GridControls to enable drag-and-drop operations:
Now you can drag records but not drop them in the other GridControl. Do the following steps to allow dropping:

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

xaml

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

C#
VB.NET

csharp

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; }

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

xaml

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

C#
VB.NET

csharp

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;
        }
    }
}

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