DevExtreme v24.1 is now available.

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

Your search did not match any results.

JavaScript/jQuery Data Grid - Local Reordering

The JavaScript DataGrid allows users to drag and drop rows. Use the icon to the left of the row as the drag handle.

To enable this feature, set the allowReordering property to true and change the row index in the onReorder function.

Use the rowDragging object to configure the row drag and drop feature.

Backend API
$(() => { const dataGrid = $('#gridContainer').dxDataGrid({ height: 440, dataSource: tasks, keyExpr: 'ID', scrolling: { mode: 'virtual', }, sorting: { mode: 'none', }, rowDragging: { allowReordering: true, onReorder(e) { const visibleRows = e.component.getVisibleRows(); const toIndex = tasks.findIndex((item) => item.ID === visibleRows[e.toIndex].data.ID); const fromIndex = tasks.findIndex((item) => item.ID === e.itemData.ID); tasks.splice(fromIndex, 1); tasks.splice(toIndex, 0, e.itemData); e.component.refresh(); }, }, showBorders: true, columns: [{ dataField: 'ID', width: 55, }, { dataField: 'Owner', lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, width: 150, }, { dataField: 'AssignedEmployee', caption: 'Assignee', lookup: { dataSource: employees, valueExpr: 'ID', displayExpr: 'FullName', }, width: 150, }, 'Subject'], }).dxDataGrid('instance'); $('#dragIcons').dxCheckBox({ text: 'Show Drag Icons', value: true, onValueChanged(data) { dataGrid.option('rowDragging.showDragIcons', data.value); }, }); });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <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=5.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/24.1.7/css/dx.light.css" /> <script src="js/dx.all.js"></script> <script src="https://unpkg.com/devextreme-aspnet-data@4.0.2/js/dx.aspnet.data.js"></script> <script src="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 class="options"> <div class="caption">Options</div> <div class="option"> <div id="dragIcons"></div> </div> </div> </div> </body> </html>
.options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { width: 24%; display: inline-block; margin-top: 10px; }
const employees = [{ ID: 1, FullName: 'John Heart', Department: 'Management', Title: 'CEO', }, { ID: 2, FullName: 'Samantha Bright', Department: 'Management', Title: 'COO', }, { ID: 3, FullName: 'Arthur Miller', Department: 'Management', Title: 'CTO', }, { ID: 4, FullName: 'Robert Reagan', Department: 'Management', Title: 'CMO', }, { ID: 5, FullName: 'Greta Sims', Department: 'Human Resources', Title: 'HR Manager', }, { ID: 6, FullName: 'Brett Wade', Department: 'IT', Title: 'IT Manager', }, { ID: 7, FullName: 'Sandra Johnson', Department: 'Human Resources', Title: 'Controller', }, { ID: 8, FullName: 'Ed Holmes', Department: 'Sales', Title: 'Sales Manager', }, { ID: 9, FullName: 'Barb Banks', Department: 'Support', Title: 'Support Manager', }, { ID: 10, FullName: 'Kevin Carter', Department: 'Shipping', Title: 'Shipping Manager', }, { ID: 11, FullName: 'Cindy Stanwick', Department: 'Human Resources', Title: 'HR Assistant', }, { ID: 12, FullName: 'Sammy Hill', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 13, FullName: 'Davey Jones', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 14, FullName: 'Victor Norris', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 15, FullName: 'Mary Stern', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 16, FullName: 'Robin Cosworth', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 17, FullName: 'Kelly Rodriguez', Department: 'Support', Title: 'Support Assistant', }, { ID: 18, FullName: 'James Anderson', Department: 'Support', Title: 'Support Assistant', }, { ID: 19, FullName: 'Antony Remmen', Department: 'Support', Title: 'Support Assistant', }, { ID: 20, FullName: 'Olivia Peyton', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 21, FullName: 'Taylor Riley', Department: 'IT', Title: 'Network Admin', }, { ID: 22, FullName: 'Amelia Harper', Department: 'IT', Title: 'Network Admin', }, { ID: 23, FullName: 'Wally Hobbs', Department: 'IT', Title: 'Programmer', }, { ID: 24, FullName: 'Brad Jameson', Department: 'IT', Title: 'Programmer', }, { ID: 25, FullName: 'Karen Goodson', Department: 'IT', Title: 'Programmer', }, { ID: 26, FullName: 'Marcus Orbison', Department: 'Human Resources', Title: 'Travel Coordinator', }, { ID: 27, FullName: 'Sandy Bright', Department: 'Human Resources', Title: 'Benefits Coordinator', }, { ID: 28, FullName: 'Morgan Kennedy', Department: 'IT', Title: 'Graphic Designer', }, { ID: 29, FullName: 'Violet Bailey', Department: 'IT', Title: 'Jr Graphic Designer', }, { ID: 30, FullName: 'Ken Samuelson', Department: 'Human Resources', Title: 'Ombudsman', }, { ID: 31, FullName: 'Nat Maguiree', Department: 'Support', Title: 'Trainer', }, { ID: 32, FullName: 'Bart Arnaz', Department: 'Engineering', Title: 'Director of Engineering', }, { ID: 33, FullName: 'Leah Simpson', Department: 'Engineering', Title: 'Test Coordinator', }, { ID: 34, FullName: 'Arnie Schwartz', Department: 'Engineering', Title: 'Engineer', }, { ID: 35, FullName: 'Billy Zimmer', Department: 'Engineering', Title: 'Engineer', }, { ID: 36, FullName: 'Samantha Piper', Department: 'Engineering', Title: 'Engineer', }, { ID: 37, FullName: 'Maggie Boxter', Department: 'Engineering', Title: 'Engineer', }, { ID: 38, FullName: 'Terry Bradley', Department: 'Engineering', Title: 'QA Engineer', }, { ID: 39, FullName: 'Gabe Jones', Department: 'Support', Title: 'Retail Coordinator', }, { ID: 40, FullName: 'Lucy Ball', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 41, FullName: 'Jim Packard', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 42, FullName: 'Hannah Brookly', Department: 'Sales', Title: 'Online Sales Manager', }, { ID: 43, FullName: 'Harv Mudd', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 44, FullName: 'Clark Morgan', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 45, FullName: 'Todd Hoffman', Department: 'Sales', Title: 'Retail Sales Manager', }, { ID: 46, FullName: 'Jackie Garmin', Department: 'Support', Title: 'Support Assistant', }, { ID: 47, FullName: 'Lincoln Bartlett', Department: 'Sales', Title: 'Sales Assistant', }, { ID: 48, FullName: 'Brad Farkus', Department: 'Engineering', Title: 'Engineer', }, { ID: 49, FullName: 'Jenny Hobbs', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 50, FullName: 'Dallas Lou', Department: 'Shipping', Title: 'Shipping Assistant', }, { ID: 51, FullName: 'Stu Pizaro', Department: 'Engineering', Title: 'Engineer', }]; const statuses = [{ id: 1, name: 'Not Started', }, { id: 2, name: 'In Progress', }, { id: 3, name: 'Deferred', }, { id: 4, name: 'Need Assistance', }, { id: 5, name: 'Completed', }]; const tasks = [ { ID: 1, Subject: 'Prepare 2013 Financial', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 0, Priority: 3, }, { ID: 2, Subject: 'Prepare 2013 Marketing Plan', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 1, Priority: 4, }, { ID: 3, Subject: 'Update Personnel Files', Status: 5, Owner: 1, AssignedEmployee: 2, OrderIndex: 2, Priority: 1, }, { ID: 4, Subject: 'Review Health Insurance Options Under the Affordable Care Act', Status: 1, Owner: 1, AssignedEmployee: 2, OrderIndex: 3, Priority: 4, }, { ID: 5, Subject: 'Choose between PPO and HMO Health Plan', Status: 4, Owner: 2, AssignedEmployee: 1, OrderIndex: 4, Priority: 3, }, { ID: 6, Subject: 'Google AdWords Strategy', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 5, Priority: 2, }, { ID: 7, Subject: 'New Brochures', Status: 1, Owner: 4, AssignedEmployee: 1, OrderIndex: 6, Priority: 1, }, { ID: 8, Subject: '2013 Brochure Designs', Status: 1, Owner: 1, AssignedEmployee: 28, OrderIndex: 7, Priority: 1, }, { ID: 9, Subject: 'Brochure Design Review', Status: 1, Owner: 28, AssignedEmployee: 29, OrderIndex: 8, Priority: 1, }, { ID: 10, Subject: 'Website Re-Design Plan', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 9, Priority: 2, }, { ID: 11, Subject: 'Rollout of New Website and Marketing Brochures', Status: 5, Owner: 1, AssignedEmployee: 4, OrderIndex: 10, Priority: 2, }, { ID: 12, Subject: 'Update Sales Strategy Documents', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 11, Priority: 2, }, { ID: 13, Subject: 'Create 2012 Sales Report', Status: 5, Owner: 8, AssignedEmployee: 41, OrderIndex: 12, Priority: 4, }, { ID: 14, Subject: 'Direct vs Online Sales Comparison Report', Status: 5, Owner: 41, AssignedEmployee: 42, OrderIndex: 13, Priority: 3, }, { ID: 15, Subject: 'Review 2012 Sales Report and Approve 2013 Plans', Status: 5, Owner: 41, AssignedEmployee: 4, OrderIndex: 14, Priority: 3, }, { ID: 16, Subject: 'Deliver R&D Plans for 2013', Status: 2, Owner: 1, AssignedEmployee: 3, OrderIndex: 15, Priority: 2, }, { ID: 17, Subject: 'Create 2013 R&D Plans', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 16, Priority: 0, }, { ID: 18, Subject: '2013 QA Strategy Report', Status: 5, Owner: 32, AssignedEmployee: 33, OrderIndex: 17, Priority: 0, }, { ID: 19, Subject: '2013 Training Events', Status: 5, Owner: 33, AssignedEmployee: 31, OrderIndex: 18, Priority: 0, }, { ID: 20, Subject: 'Approve Hiring of John Jeffers', Status: 5, Owner: 31, AssignedEmployee: 5, OrderIndex: 19, Priority: 0, }, { ID: 21, Subject: 'Non-Compete Agreements', Status: 5, Owner: 5, AssignedEmployee: 2, OrderIndex: 20, Priority: 0, }, { ID: 22, Subject: 'Update NDA Agreement', Status: 5, Owner: 2, AssignedEmployee: 1, OrderIndex: 21, Priority: 0, }, { ID: 23, Subject: 'Update Employee Files with New NDA', Status: 1, Owner: 2, AssignedEmployee: 5, OrderIndex: 22, Priority: 3, }, { ID: 24, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 23, Priority: 0, }, { ID: 25, Subject: 'Sign Updated NDA', Status: 5, Owner: 5, AssignedEmployee: 7, OrderIndex: 24, Priority: 0, }, { ID: 26, Subject: 'Sign Updated NDA', Status: 1, Owner: 5, AssignedEmployee: 8, OrderIndex: 25, Priority: 1, }, { ID: 27, Subject: 'Sign Updated NDA', Status: 4, Owner: 5, AssignedEmployee: 9, OrderIndex: 26, Priority: 0, }, { ID: 28, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 27, Priority: 1, }, { ID: 29, Subject: 'Submit Questions Regarding New NDA', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 28, Priority: 1, }, { ID: 30, Subject: 'Submit Questions Regarding New NDA', Status: 4, Owner: 9, AssignedEmployee: 19, OrderIndex: 29, Priority: 0, }, { ID: 31, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 30, Priority: 0, }, { ID: 32, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 31, Priority: 0, }, { ID: 33, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 32, Priority: 0, }, { ID: 34, Subject: 'Submit Signed NDA', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 33, Priority: 0, }, { ID: 35, Subject: 'Update Revenue Projections', Status: 5, Owner: 1, AssignedEmployee: 7, OrderIndex: 34, Priority: 0, }, { ID: 36, Subject: 'Review Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 8, OrderIndex: 35, Priority: 0, }, { ID: 37, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 41, OrderIndex: 36, Priority: 0, }, { ID: 38, Subject: 'Comment on Revenue Projections', Status: 5, Owner: 7, AssignedEmployee: 42, OrderIndex: 37, Priority: 0, }, { ID: 39, Subject: 'Comment on Revenue Projections', Status: 1, Owner: 7, AssignedEmployee: 45, OrderIndex: 38, Priority: 2, }, { ID: 40, Subject: 'Provide New Health Insurance Docs', Status: 5, Owner: 11, AssignedEmployee: 5, OrderIndex: 39, Priority: 0, }, { ID: 41, Subject: 'Review Changes to Health Insurance Coverage', Status: 5, Owner: 11, AssignedEmployee: 10, OrderIndex: 40, Priority: 0, }, { ID: 42, Subject: 'Scan Health Insurance Forms', Status: 5, Owner: 10, AssignedEmployee: 14, OrderIndex: 41, Priority: 0, }, { ID: 43, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 15, OrderIndex: 42, Priority: 0, }, { ID: 44, Subject: 'Sign Health Insurance Forms', Status: 5, Owner: 14, AssignedEmployee: 13, OrderIndex: 43, Priority: 0, }, { ID: 45, Subject: 'Sign Health Insurance Forms', Status: 3, Owner: 14, AssignedEmployee: 16, OrderIndex: 44, Priority: 0, }, { ID: 46, Subject: 'Follow up with West Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 18, OrderIndex: 45, Priority: 3, }, { ID: 47, Subject: 'Follow up with East Coast Stores', Status: 1, Owner: 9, AssignedEmployee: 17, OrderIndex: 46, Priority: 3, }, { ID: 48, Subject: 'Send Email to Customers about Recall', Status: 5, Owner: 9, AssignedEmployee: 19, OrderIndex: 47, Priority: 0, }, { ID: 49, Subject: 'Submit Refund Report for 2013 Recall', Status: 5, Owner: 7, AssignedEmployee: 9, OrderIndex: 48, Priority: 0, }, { ID: 50, Subject: 'Give Final Approval for Refunds', Status: 5, Owner: 7, AssignedEmployee: 2, OrderIndex: 49, Priority: 0, }, { ID: 51, Subject: 'Prepare Product Recall Report', Status: 5, Owner: 3, AssignedEmployee: 32, OrderIndex: 50, Priority: 0, }, { ID: 52, Subject: 'Review Product Recall Report by Engineering Team', Status: 5, Owner: 3, AssignedEmployee: 1, OrderIndex: 51, Priority: 0, }, { ID: 53, Subject: 'Create Training Course for New TVs', Status: 5, Owner: 32, AssignedEmployee: 31, OrderIndex: 52, Priority: 0, }, { ID: 54, Subject: 'Review Training Course for any Omissions', Status: 5, Owner: 31, AssignedEmployee: 33, OrderIndex: 53, Priority: 0, }, { ID: 55, Subject: 'Review Overtime Report', Status: 5, Owner: 5, AssignedEmployee: 6, OrderIndex: 54, Priority: 0, }, { ID: 56, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 21, OrderIndex: 55, Priority: 0, }, { ID: 57, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 22, OrderIndex: 56, Priority: 0, }, { ID: 58, Subject: 'Submit Overtime Request Forms', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 57, Priority: 0, }, { ID: 59, Subject: 'Overtime Approval Guidelines', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 58, Priority: 0, }, { ID: 60, Subject: 'Refund Request Template', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 59, Priority: 0, }, { ID: 61, Subject: 'Recall Rebate Form', Status: 3, Owner: 12, AssignedEmployee: 8, OrderIndex: 60, Priority: 0, }, { ID: 62, Subject: 'Create Report on Customer Feedback', Status: 5, Owner: 30, AssignedEmployee: 12, OrderIndex: 61, Priority: 0, }, { ID: 63, Subject: 'Review Customer Feedback Report', Status: 5, Owner: 30, AssignedEmployee: 8, OrderIndex: 62, Priority: 0, }, { ID: 64, Subject: 'Customer Feedback Report Analysis', Status: 3, Owner: 8, AssignedEmployee: 1, OrderIndex: 63, Priority: 0, }, { ID: 65, Subject: 'Prepare Shipping Cost Analysis Report', Status: 5, Owner: 8, AssignedEmployee: 10, OrderIndex: 64, Priority: 0, }, { ID: 66, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 13, OrderIndex: 65, Priority: 0, }, { ID: 67, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 15, OrderIndex: 66, Priority: 0, }, { ID: 68, Subject: 'Provide Feedback on Shippers', Status: 5, Owner: 10, AssignedEmployee: 16, OrderIndex: 67, Priority: 0, }, { ID: 69, Subject: 'Select Preferred Shipper', Status: 5, Owner: 10, AssignedEmployee: 2, OrderIndex: 68, Priority: 0, }, { ID: 70, Subject: 'Complete Shipper Selection Form', Status: 3, Owner: 2, AssignedEmployee: 1, OrderIndex: 69, Priority: 0, }, { ID: 71, Subject: 'Upgrade Server Hardware', Status: 5, Owner: 22, AssignedEmployee: 6, OrderIndex: 70, Priority: 0, }, { ID: 72, Subject: 'Upgrade Personal Computers', Status: 4, Owner: 21, AssignedEmployee: 6, OrderIndex: 71, Priority: 0, }, { ID: 73, Subject: 'Approve Personal Computer Upgrade Plan', Status: 5, Owner: 6, AssignedEmployee: 2, OrderIndex: 72, Priority: 0, }, { ID: 74, Subject: 'Decide on Mobile Devices to Use in the Field', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 73, Priority: 0, }, { ID: 75, Subject: 'Upgrade Apps to Windows RT or stay with WinForms', Status: 5, Owner: 24, AssignedEmployee: 6, OrderIndex: 74, Priority: 0, }, { ID: 76, Subject: 'Estimate Time Required to Touch-Enable Apps', Status: 5, Owner: 24, AssignedEmployee: 25, OrderIndex: 75, Priority: 0, }, { ID: 77, Subject: 'Report on Tranistion to Touch-Based Apps', Status: 5, Owner: 6, AssignedEmployee: 23, OrderIndex: 76, Priority: 0, }, { ID: 78, Subject: 'Try New Touch-Enabled WinForms Apps', Status: 5, Owner: 6, AssignedEmployee: 3, OrderIndex: 77, Priority: 0, }, { ID: 79, Subject: 'Rollout New Touch-Enabled WinForms Apps', Status: 4, Owner: 6, AssignedEmployee: 24, OrderIndex: 78, Priority: 0, }, { ID: 80, Subject: 'Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 6, OrderIndex: 79, Priority: 0, }, { ID: 81, Subject: 'Review Site Up-Time Report', Status: 5, Owner: 3, AssignedEmployee: 4, OrderIndex: 80, Priority: 0, }, { ID: 82, Subject: 'Review Online Sales Report', Status: 5, Owner: 4, AssignedEmployee: 1, OrderIndex: 81, Priority: 0, }, { ID: 83, Subject: 'Determine New Online Marketing Strategy', Status: 5, Owner: 4, AssignedEmployee: 8, OrderIndex: 82, Priority: 0, }, { ID: 84, Subject: 'New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 42, OrderIndex: 83, Priority: 0, }, { ID: 85, Subject: 'Approve New Online Marketing Strategy', Status: 5, Owner: 8, AssignedEmployee: 4, OrderIndex: 84, Priority: 0, }, { ID: 86, Subject: 'Submit New Website Design', Status: 5, Owner: 8, AssignedEmployee: 28, OrderIndex: 85, Priority: 0, }, { ID: 87, Subject: 'Create Icons for Website', Status: 5, Owner: 28, AssignedEmployee: 29, OrderIndex: 86, Priority: 0, }, { ID: 88, Subject: 'Review PSDs for New Website', Status: 5, Owner: 28, AssignedEmployee: 6, OrderIndex: 87, Priority: 0, }, { ID: 89, Subject: 'Create New Shopping Cart', Status: 5, Owner: 6, AssignedEmployee: 24, OrderIndex: 88, Priority: 0, }, { ID: 90, Subject: 'Create New Product Pages', Status: 5, Owner: 6, AssignedEmployee: 25, OrderIndex: 89, Priority: 0, }, ];