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

Row Reordering

The row reordering feature of the Grid allows you to rearrange rows by dragging them with the mouse. By default, the row reordering is disabled.

You can reorder the Grid rows by:

Using a Specified Handle

To enable the row reordering feature of the Grid:

  1. Set the rowReorderable property of the Grid to true. By default row reordering is disabled.
  2. Define a RowReorderColumn by using the <kendo-grid-rowreorder-column> tag. It will hold the dedicated drag handle for row reordering.

When the Grid data is bound using the DataBindingDirective, all data updates related to row reordering will be handled automatically.

The following example demonstrates how to drag and drop a row using a drag handle.

View Source
Change Theme:

Dragging the Row

To allow the dragging of a row without needing the dedicated handle, use the DragTargetContainer and DropTargetContainer built-in directives. This will allow the user to reorder a row by clicking anywhere on it:

  1. Create a wrapper container of the Grid and apply the built-in DragTargetContainer and DropTargetContainer directives.

    <div #wrapper
        ... >
  2. To define the drag and drop targets, configure the directives' properties.

    <div ...
        [hint]="{hintClass: 'rowHint'}"
  3. Use the dragData callback to fetch the row index.

    public dragData = ({ dragTarget }) => {
        return Number(dragTarget.getAttribute('data-kendo-grid-item-index'));
  4. Use the fetched index to reorder the rows and invoke the notify() method of the directives to reflect the changes.

    public onDrop(e: DropTargetEvent): void {
        const fromIndex = e.dragData;
        // update data

The following example demonstrates how to drag and drop a row.

View Source
Change Theme:

Known Limitations

  • Row reordering does not work with sorting as both functionalities are mutually exclusive.