DevExtreme, DevExtreme (HTML JS), Data Grid
Switch branches/tags
Nothing to show
Clone or download
DevExpressExampleBot DevExpressExampleBot
DevExpressExampleBot and DevExpressExampleBot Source auto update [skip ci]
Latest commit 98d6dc5 Apr 24, 2018
Failed to load latest commit information.
JS Source auto update [skip ci] Apr 24, 2018
.gitattributes initial commit Apr 23, 2018
.gitignore initial commit Apr 23, 2018
LICENSE initial commit Apr 23, 2018 initial commit Apr 23, 2018
config.json initial commit Apr 23, 2018

DataGrid - How to reorder rows using drag-and-drop

This example demonstrates how to move dxDataGrid rows using Draggable and Droppable plug-ins of the jQueryUI library. 

To accomplish this task, we need to perform the following steps:

1. Set a fake CSS class ("myRow") to a data row. This will help us find all data rows using a jQuery selector and assign Draggable and Droppable plug-ins to the rows. Assign the key value of each row to a row element. We need to use the dxDataGrid.rowPrepared callback function for this step.
2. When the drop event fires, we need to get indexes of the dropped and the target rows, recalculate indexes according our requirements and save them to a data store.
3. Reload data by calling the dxDataGrid.refresh method.

See also: