DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Data Grid - Remote Reordering

This demo shows how to use drag and drop to reorder records stored on the server. This functionality requires that records' order indexes are in an individual data field (OrderIndex in this demo) and sorted against that field.

Row drag and drop is configured in the rowDragging object. Set allowReordering to true to enable this feature. To specify the highlight mode of the row's drop position, use the dropFeedbackMode property. In this demo, it is set to "push": rows move up or down with animation to create space for the new position of the row.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

When a row is dropped, the onReorder event handler is called. Use it to update the record's OrderIndex on the server. In this demo, we use the onReorder function's toIndex parameter to obtain the position at which a user dropped the row. The position is then used to get the new order index. The store's update method sends this index to the server where the records are sorted and returned to the client. Server-side implementation is available in the ASP.NET Core and ASP.NET MVC 5 versions of this demo under the DataGridRowReorderingController.cs tab.