Row Click-Move-Click

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.

EditPreviewOpen In Dojo

    <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.

$("#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.

$("#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.

$("#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

• The Row Drag & Drop does not work in a combination with data sources that involve rendering rows in an order different than their natural one, such as sorting, filtering and grouping.
• The Drag & Drop functionality in combination with Selection is not supported in Microsoft Internet Explorer.