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. 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.

See more Hide details

Prev Demo Next Demo

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

ASP.NET Core

ASP.NET MVC

Copy to CodePen

Apply

Reset

$(function(){ var url = "https://js.devexpress.com/Demos/Mvc/api/RowReordering", tasksStore = DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: url + "/Tasks", updateUrl: url + "/UpdateTask", onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; } }), employeesStore = DevExpress.data.AspNet.createStore({ key: "ID", loadUrl: url + "/Employees", onBeforeSend: function(method, ajaxOptions) { ajaxOptions.xhrFields = { withCredentials: true }; } }); $("#gridContainer").dxDataGrid({ height: 440, dataSource: tasksStore, remoteOperations: true, scrolling: { mode: "virtual" }, sorting: { mode: "none" }, rowDragging: { allowReordering: true, dropFeedbackMode: "push", onReorder: function(e) { var visibleRows = e.component.getVisibleRows(), newOrderIndex = visibleRows[e.toIndex].data.OrderIndex, d = $.Deferred(); tasksStore.update(e.itemData.ID, { OrderIndex: newOrderIndex }).then(function() { e.component.refresh().then(d.resolve, d.reject); }, d.reject); e.promise = d.promise(); } }, showBorders: true, columns: [{ dataField: "ID", width: 55 }, { dataField: "Owner", lookup: { dataSource: employeesStore, valueExpr: "ID", displayExpr: "FullName" }, width: 150 }, { dataField: "AssignedEmployee", caption: "Assignee", lookup: { dataSource: employeesStore, valueExpr: "ID", displayExpr: "FullName" }, width: 150 }, "Subject"] }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.4/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/20.2.4/js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@2.7.1/js/dx.aspnet.data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="gridContainer"></div> </div> </body> </html>

#employeeInfo .employeePhoto { height: 100px; float: left; padding: 20px; } #employeeInfo .employeeNotes { padding-top: 20px; text-align: justify; } .dark #employeeInfo .employeeNotes { color: rgb(181, 181, 181); }