Add Styles to Dragged Rows in the Grid

Updated on Sep 9, 2026

Environment

Product Version	2.4.0
Product	Progress® Kendo UI for Vue

Description

The current Knowledge base article demonstrates how we can add style to the row that is currently dragged inside the Grid component. With this styling, the users can identify which row is currently dragged and which will be its position when dropped.

Solution

To add style to the currently dragged row inside the Grid, we can use its built-in style for selected field. To use this functionality, in the setActive method in the example we set the selected field of the currently active row to true.

js

setActive(dataItem) {
	this.activeItem = dataItem;
	this.activeItem.selected = true;
}

To reset the style of a row, once it is dropped, the below code is used.

js

this.items  =  this.items.map(i => {
    i.selected = undefined;
    return i;
})

Runnable example

Example

View Source

Loading ...