How to drag and drop the rows in WPF DataGrid (SfDataGrid)?
WPF DataGrid (SfDataGrid) 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 SfDataGrid and other controls such as ListView and SfTreeGrid. SfDataGrid allows dropping rows when AllowDrop is true and allows dragging when AllowDraggingRows is true.
<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
SfDataGrid 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">
The drag selection cannot be performed while the AllowDraggingRows enabled as true in the SfDataGrid.
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
SfDataGrid 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 SfDataGrid.
For more information, please refer the KB link
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 SfDataGrid’ 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.
For more information, please refer the KB link
Take a moment to peruse the WPF DataGrid – Row Drag and Drop documentation, where you can find about row drag and drop with code examples.
Please refer this link to know about the essential features of WPF DataGrid.
View WPF DataGrid Reorder Rows Demo in GitHub.
