How to Drag and Drop the Rows in WPF DataGrid?

About the sample

This example illustrates how to drag and rop the rows WPF DataGrid (SfDataGrid).

DataGrid allows drag and drop the rows within and between controls by setting the AllowDraggingRows and AllowDrop property as true. It is also possible to drag and drop the rows between DataGrid and other controls such as ListView and TreeGrid. SfDataGrid allows dropping rows when AllowDrop is true and allows dragging when AllowDraggingRows is true.

XAML

<syncfusion:SfDataGrid x:Name="dataGrid1" Grid.Column="0"
                        AllowEditing="True"
                        ColumnSizer="Star"
                        AllowDraggingRows="True"
                        AllowDrop="True"
                        AutoGenerateColumns="False"    
                        SelectionUnit="Row"
                        LiveDataUpdateMode="AllowDataShaping"
                        ItemsSource="{Binding UserDetails}" 
                        ShowRowHeader="True">

While dropping, the dragged records can be added above or below to the target record based on its drop position.

For example, if you dropped record at the bottom of the targeted record, it will be added below the targeted record.

If you drop above the targeted record, it will be added above the targeted record.

Dragging multiple rows

DataGrid allows to drag multiple selected rows. To enable multiple selection, set the SfDataGrid.SelectionMode as Multiple or Extended.

<syncfusion:SfDataGrid x:Name="dataGrid1" Grid.Column="0"
                        AllowEditing="True"
                        ColumnSizer="Star"
                        AllowDraggingRows="True"
                        AllowDrop="True"
                        AutoGenerateColumns="False"
                        SelectionMode="Multiple"
                        SelectionUnit="Row"
                        LiveDataUpdateMode="AllowDataShaping"
                        ItemsSource="{Binding UserDetails}" 
                        ShowRowHeader="True">

Note: The drag selection cannot be performed while the AllowDraggingRows enabled as true in the DataGrid.

Changing the row drop indicator

By default, the drop position will be indicated with arrows. To change the drop indicator as line, then set the SfDataGrid.RowDropIndicatorMode as Line.

<syncfusion:SfDataGrid x:Name="dataGrid1" 
                        Grid.Column="0" 
                        Margin="10 0 10 0"
                        AllowEditing="True"
                        ColumnSizer="Star"
                        AllowDraggingRows="True"
                        AllowDrop="True"
                        AutoGenerateColumns="False"
                        SelectionMode="Multiple"
                        SelectionUnit="Row"
                        LiveDataUpdateMode="AllowDataShaping"
                        ItemsSource="{Binding UserDetails}" 
                        ShowRowHeader="True"
                        RowDropIndicatorMode="Line">

Change the color of drag line indicator

DataGrid does not provide the direct support to change the color of drag line indicator. You can change the color of drag line indicator by overriding the HeaderRowControl and VirtualizingCellsControl Template in DataGrid.

Row drag and drop between two DataGrid's

To perform the dragging operation between two datagrid by using the GridRowDragDropController.DragStart , GridRowDragDropController.Drop , GridRowDragDropController.DragOver and GridRowDragDropController.Dropped events.

You should enable AllowDraggingRows and AllowDrop property for the DataGrid's which are involved in row drag and drop operations.

You can go through this user guide to know more about drag and drop between two DataGrid’s.

Take a moment to peruse the documentation, where you can find about Row drag and drop, with code examples.

Requirements to run the demo

Visual Studio 2015 and above versions