Reordering of Rows

You can implement row reordering in the KendoReact Data Grid by using the KendoReact Drag&Drop, built-in browser APIs or third-party libraries.

KendoReact Drag&Drop

Implementing row reordering requires the following steps:

1. Wrap the Grid with the KendoReact Drag&Drop component.
2. Create a ReorderContext using React createContext to share the reorder and dragStart functions.
3. Create a DraggableRow and pass it to the rowRender prop. Handle the onPress, onDragStart, onDrag, onDragEnd and onRelease events to manage the dragging state and movement of rows.
4. Create a DragHandleCell with a visual indicator and pass it to the cell prop of the GridColumn to indicate where users can initiate a drag action.
5. Implement a reorder function that will calculate the new position for the dragged item and update the data in the KendoReact Data Grid data.
6. Pass the dragStart and reorder function to the ReorderContext.

The following example demonstrates this approach in action:

Change Theme

Theme

Loading ...

Multi-select reordering

The KendoReact Drag&Drop functionality enables advanced scenarios of the drag-and-drop behavior. One of the scenarios is reordering all selected rows.

The following example demonstrates how the drag-and-drop functionality can be combined with multi-row selection.

Change Theme

Theme

Loading ...

Detail row reordering

The following example demonstrates how to combine the drag-and-drop functionality with detail rows.

Change Theme

Theme

Loading ...

Built-in Browser APIs

The following example demonstrates one of the possible approaches which utilizes the HTML Drag and Drop API.

Change Theme

Theme

Loading ...

Suggested Links

• API of the HTML Drag and Drop Functionality
• API Reference of the Grid
• API Index of the Grid