Blazor Grid - Incorporate Drag and Drop Support

The DevExpress Blazor Grid supports drag-and-drop operations.

Use the following API members to activate this feature for your Grids:

• AllowDragRows - Specifies whether users can start row drag-and-drop operations.
• AllowedDropTarget - Specifies allowed drag-and-drop targets.

When a user drops rows, the ItemsDropped event fires. In its handler, update the data source: insert rows at the drop position and remove them from the initial position, if required.

Reorder Rows in a Grid

If you want to let users reorder rows, set the AllowDragRows property to true. You can test this usage scenario on the Reorder page.

Drag Rows Between Components

To let users drag rows between components, do the following:

• Set the AllowDragRows property to true.
• Set the AllowedDropTarget to External. You can use All if you also want to allow row reordering.

The DropTargetMode property specifies drop position indication style:

• A specific location defined by the TargetItem and DropPosition properties.
• The entire data area. You need to implement custom insertion logic (for example, if your data is sorted or grouped) in the ItemsDropped event handler.

You can test this usage scenario on the Between page.

Files to Look At

• Between.razor
• Reorder.razor

Documentation

• Drag and Drop Rows in Blazor Grid

Does This Example Address Your Development Requirements/Objectives?

(you will be redirected to DevExpress.com to submit your response)