Drag-and-Drop Operations in Data Grid View for .NET MAUI

• Sep 06, 2023
• 2 minutes to read

DataGridView supports drag-and-drop operations and allows users to reorder rows. A user should touch and hold a data row, and then drag and drop it to another position.

To replicate the kind of UI as the one illustrated in the image above, refer to the following topic: Replicate a Single-Column Kanban View.

Enable Drag and Drop Operations

Set the DataGridView.AllowDragDropRows property to true:

XAML

<dxg:DataGridView AllowDragDropRows="True" ...>

To allow users to drag and drop sorted rows, enable the DataGridView.AllowDragDropRows property in addition to the AllowDragDropRows property.

Respond to User Drag and Drop Actions

Handle the following events to perform custom actions when a user moves grid rows:

* DragRow

Occurs when users touch and hold a data row to drag it. This event allows you to prevent specific rows from being dragged.

* DragRowOver

Occurs each time a row is over another row when being dragged. The event allows you to manage the drag-and-drop action while a user is moving a grid row over other rows. For example, you can prevent rows from being dropped at specific positions. In this case, no place is allocated for a row to be dropped while a user is dragging it over rows that you specify.

* DropRow

Occurs when users drop a row.

* CompleteRowDragDrop

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

Example: Prevent Moving Specific Items

You can prevent specific items from being dragged. To do this, handle the DataGridView.DragRow event and set the e.Cancel property to false to cancel the drag operation if necessary.

XAML

<dxg:DataGridView ... 
                  AllowDragDropRows="True"
                  DragRow="DataGridView_DragRow" 
                  x:Name="dataGrid">

C#

private void DataGridView_DragRow(object sender, DevExpress.Maui.DataGrid.DragRowEventArgs e) {
    draggedItem = (TaskToDo)e.DragItem;
    e.Cancel = draggedItem.IsPlaceholder;
    draggedTaskOriginalStage = draggedItem.Stage;
}

Customize the Appearance of Moved Rows

The DataGridView.RowDragPreviewTemplate property allows you to specify what moved rows look like. A RowData object specifies the binding context for this template.

Specify the DataGridView.RowDragPreviewShadowColor property to set the shadow color of a moved row.