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

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.

See Also

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