Row Click-Move-Click

Updated on Sep 11, 2026

As of Kendo UI R2 SP1 2023, users can reorder the Grid's rows by using the click-move-click functionality provided by the clickMoveClick option. To start moving the row, users can click the drag icon, and then click again to place the row in its new position.

Example

View Source

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            columns: [
                { draggable: true, width: "40px" },
                { field: "name" },
                { field: "age" }
            ],
            dataSource: [
                { id:1, name: "Jane Doe", age: 30 },
                { id:2, name: "John Doe", age: 33 }
            ],
            reorderable: {
                rows: {
                    clickMoveClick: true
                }
            }
        });
    </script>

Row Drag and Drop

The Drag and Drop functionality for the Grid rows allows you to move a single row or multitude rows between different parents in the same Grid or between different Kendo UI Grid instances.

For a runnable example, refer to the demo on Row Drag & Drop in the Grid.

Getting Started

To enable the Drag and Drop functionality, set the reorderable.rows property to true.

• The Drag & Drop functionality requires defining the id field of the data items in schema.model. This ensures the correct reordering of the data items.

js

$("#grid").kendoGrid({
    dataSource: {
        schema: {
            model: {
                id: "ProductID"
                }
            }
    }
    reorderable: {
        rows: true
    },
    // Other configuration.
 });

Drag handle

You can render a drag handle and the user could reorder the rows by dragging the row through its drag handle. To enable the drag handle, add the draggable: true property in the columns configuration.

js

$("#grid").kendoGrid({
    columns: [
        { draggable: true },
        { field: "ProductName", title: "Product Name", width: "200px" },
    ],
    // Other configuration.
 });

RowReorder Event

The rowReorder event fires when the user drops a row into a new location. It allows you to manipulate your data collection based on where the user dropped the element.

js

$("#grid").kendoGrid({
    dataSource: {
        schema: {
            model: {
                id: "ProductID"
                }
            }
    }
    reorderable: {
        rows: true
    },
    rowReorder(ev) {
        // Custom logic
    }
    // Other configuration.
 });

Keyboard Navigation

The Grid supports its keyboard navigation functionality through the navigatable option. Once enabled, the user will be able to reorder rows by using the following key combination:

Ctrl + Up Arrow / Down Arrow

When multiple selection is enabled for the Grid rows the user can drag and drop the selected rows with the following combination:

Ctrl + Mouse left-click

As of Kendo UI version R3 2023, the Row Drag and Drop on mobile devices activates on hold & slide of the row.

Known Limitations

• Row Drag & Drop is not supported when sorting is applied — The sort re-orders the data after every change, so a dropped row immediately returns to its sorted position instead of staying where it was placed.
• Row Drag & Drop is not supported when filtering is applied — Because the filter hides rows from the view, the drop position does not match the actual position in the full dataset, causing rows to land in the wrong place.
• Row Drag & Drop is not supported when grouping is applied — Rows can only be dropped within the flat list of visible data rows, so reordering across groups is not possible.

See Also

• Drag & Drop in the KendoUI Grid (Demo)
• JavaScript API Reference of the KendoUI Grid