Enable Drag-and-Drop

• May 22, 2020
• 3 minutes to read

The DataGridView supports drag-and-drop operations and allows users to reorder rows. Users should touch and hold a data row and then drag and drop the row to another position.

To enable drag-and-drop operations, set the AllowDragDropRows property to true.

• Xaml

<dxg:DataGridView AllowDragDropRows="True"/>

Handle Drag-and-Drop Operations

The table below lists events that allow you to handle drag-and-drop operations.

|

Event

|

Description

| | --- | --- | |

DragRow

|

Occurs when a user touches and holds a data row.

| |

DragRowOver

|

Occurs when a user drags a row over other rows.

| |

DropRow

|

Occurs when a user drops a row.

| |

CompleteRowDragDrop

|

Occurs after the drag-and-drop operation is completed.

|

Drag Specific Rows

1. Subscribe to the DragRow event.

2. In the event handler, specify a row(s) that cannot be dragged. Use the RowHandle or DragItem property to identify the row by its handle or data source item. Set the Allow property to false to prevent drag-and-drop operations.

Define a Drop Zone

1. Subscribe to the DragRowOver event.

2. In the event handler, use the RowHandle property to identify the dragged row, and the DropRowHandle property to identify the drop position. Set the Allow property to false to prohibit row drop.

Cancel Drag-and-Drop

Subscribe to DropRow event. Set the Allow property to false to cancel a drag-and-drop operation.

Finalize Drag-and-Drop

You can define an action that is executed when the drag-and-drop operation is completed.

1. Subscribe to the CompleteRowDragDrop event.

2. In the event handler, use the RowHandle property to get the dropped row handle. To access a data source item (EmployeeTask with the DueDate property) that corresponds to the dropped row, use the Item property.

Customize Row Drag Preview

Use the RowDragPreviewShadowColor property to change the dragged row’s shadow color.

• Xaml

<dxg:DataGridView RowDragPreviewShadowColor="Red"/>

The RowDragPreviewTemplate property allows you to specify the template of the dragged row’s content.

• Xaml

<dxg:DataGridView AllowDragDropRows="True" 
                  AllowDragDropSortedRows="True"
                  RowDragPreviewShadowColor="Red">
    <dxg:DataGridView.RowDragPreviewTemplate>
        <DataTemplate>
            <Grid>
                <Image Source="drag_and_drop" HeightRequest="32" VerticalOptions="Center"/>
                <Label Grid.Column="1" Text="{Binding Path=Item.Name}" VerticalOptions="Center" 
                       FontSize="20"/>
            </Grid>   
        </DataTemplate>
    </dxg:DataGridView.RowDragPreviewTemplate>
</dxg:DataGridView>

Note

To use an icon in this example, add the drag_and_drop.png icon file to the Resources/drawable folder of an Android project, or Assets.xcassets asset catalog of an iOS project. The icon is not included in the bundle.

Drag and Drop Sorted Rows

If the DataGridView is sorted, users can drag the rows within the list of rows with the same values in a sorted column. To allow users to drag the sorted rows freely, enable the AllowDragDropSortedRows property.

• Xaml

<dxg:DataGridView AllowDragDropRows="True" 
                  AllowDragDropSortedRows="True"/>

If a user drops a row between the rows with a different value in the sorted column, the value of this column in the dragged row changes.