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 the dropPosition available in the GridRowReorderEvent 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.