New to KendoReact? Start a free 30-day trial
Reordering of Rows
The KendoReact Grid comes with a built-in reordering column type, that allows you to easily change the order of each row by dragging it to the target position.
KendoReact Drag&Drop
Implementing row reordering requires the following steps:
- Enable the
rowReorderable
prop of the Grid.
jsx
<Grid rowReorderable={{ enabled: true }}>
- Add Grid column with reorder
columnType
to render the built-in drag handles to every row.
jsx
<Column columnType="reorder" width={60} />
- Handle the
onRowReorder
event of the Grid in order to update the data with the new row indexes. You can use thedropPosition
available in theGridRowReorderEvent
object to calculate the target position of the dragged row.
jsx
<Grid onRowReorder={handleRowReorder}>
JavaScript
const handleRowReorder = (event: GridRowReorderEvent) => {
const reorderedData = [...data];
const droppedItemIndex = data.findIndex((item) => item === event.droppedDataItem);
event.draggedDataItems.forEach((draggedItem) => {
const draggedItemIndex = data.findIndex((item) => item === draggedItem);
const idxToAdd: number = calculateIndexToAdd(draggedItemIndex, droppedItemIndex, event.dropPosition)!;
reorderedData.splice(draggedItemIndex, 1);
reorderedData.splice(idxToAdd, 0, event.draggedDataItems[0]);
});
setData(reorderedData);
};
const calculateIndexToAdd = (dragIndex: number, dropIndex: number, dropPosition: GridReorderDropPosition) => {
const isDropPosition = dropPosition === 'after';
if (dragIndex > dropIndex) {
return isDropPosition ? dropIndex + 1 : dropIndex;
}
return isDropPosition ? dropIndex : dropIndex - 1;
};
The following example demonstrates this approach in action:
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 ...