DataGrid for DevExtreme - How to drag multiple rows

This example demonstrates how to simultaneously drag and drop multiple selected rows.

This implementation includes solutions for both local and remote data sources. It is based on our demos that illustrate how to drag a single row:

• Demo: Local Reordering
• Demo: Remote Reordering

The implementation for remote data sources sends multiple requests to update the order index of every dropped row. If your back-end supports batch updates, you can simultaneously send all data updates in a custom way.

Implementation Details

Use the DataGrid.rowDragging object to configure the drag and drop functionality:

1. Handle the RowDragging.onDragStart event to collect selected rows and cancel the drag operation if a user attempts to drag non-selected rows.
2. Handle the RowDragging.onDragChange event to cancel the drop operation if a user attempts to drop rows to the same position.
3. Handle the RowDragging.onReorder event to re-order rows in the data source.
4. Define RowDragging.dragTemplate to arrange cell values of selected rows for the dragged item.

Files to Review

• jQuery
  • GridLocalData.js
  • GridRemoteData.js
• Angular
  • data-grid-local-data.component.html
  • data-grid-local-data.component.ts
  • data-grid-remote-data.component.html
  • data-grid-remote-data.component.ts
• Vue
  • DataGridLocalData.vue
  • DataGridRemoteData.vue
• React
  • DataGridLocalData.tsx
  • DataGridRemoteData.tsx
• NetCore
  • DataGridLocal.cshtml
  • DataGridRemote.cshtml
  • GridLocal.js.js
  • GridRemote.js

Documentation

DataGrid.rowDragging

More Examples

• TreeView for DevExtreme - How to drag and drop multiple items
• DataGrid for DevExtreme - How to drag multiple rows between two grids

Does this example address your development requirements/objectives?

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