New to Kendo UI for Angular? Start a free 30-day trial

Implementing Multiple Row Reordering for the Selected Rows Inside the Grid

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI® for Angular Grid

Description

I need to customize the row reordering feature of the Grid to support the drag and drop of multiple selected rows at the same time.

This Knowledge Base article also answers the following questions:

How can I implement a multiple row reordering feature inside the Grid?
How can I drag and drop multiple rows inside the Grid?
Is there a way to drag and drop more than one row in the Grid at the same time?
How can I drag and drop multiple selected rows inside the Grid?

Solution

To implement a multiple row reordering feature for the selected rows inside the Kendo UI for Angular Grid, consider the following approaches:

Using the Built-In Event
Manual Approach

Using the Built-In Event

Enable the built-in row reordering feature of the Grid by setting the rowReorderable property to true.
html
```
<kendo-grid ... [rowReorderable]="true">
    ...          
</kendo-grid>
```
Bind the SelectionDirective and use its selectedKeys property to store the currently selected rows inside the Grid.
html
```
<kendo-grid ... kendoGridSelectBy [(selectedKeys)]="selectedItems">
    ...      
</kendo-grid>
```

Handle the built-in rowReorder event and use it to programmatically determine the new position of the selected rows and update the indexes of the selected items.

public onDrop(e: RowReorderEvent) {
    let destinationIndex = e.dropTargetRow.rowIndex;
    const fromIndex = this.selectedItems.sort()[0];

    e.dropPosition == 'after' ? (destinationIndex += 1) : destinationIndex;

    this.updateGridsData(fromIndex, destinationIndex, this.selectedItems);

    if (destinationIndex > fromIndex) {
        this.selectedItems = this.selectedItems.map(
            (itm, idx) => destinationIndex - this.itemsAboveDropIndex(destinationIndex, this.selectedItems) + idx
        );
    } else {
        this.selectedItems = this.selectedItems.map((itm, idx) => destinationIndex + idx);
    }
}

(Optional) Use the RowDragHintTemplateDirective to customize the default drag hint.

html

<kendo-grid-rowreorder-column [width]="40">
    <ng-template kendoGridRowDragHintTemplate let-dataItem> 
        {{ selectedItems.length }} rows
    </ng-template>
</kendo-grid-rowreorder-column>

The following example demonstrates the suggested approach in action.

Change Theme

Theme

Loading ...

Alternatively, use the built-in SelectionDirective and the Kendo UI for Angular Drag and Drop utility to develop the desired custom logic for the drag-and-drop of multiple selected rows inside the Grid similarly to the approach for a single row.

The following example demonstrates one of the possible implementations for the suggested approach.

Change Theme

Theme

Loading ...

Known Limitations

Row reordering does not work with sorting as both functionalities are mutually exclusive.
Both approaches demonstrated in the article do not support the grouping and filtering functionalities.