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
• Dragging the row

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.

Change Theme

Theme

Loading ...

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.

   html

   <div #wrapper
       kendoDragTargetContainer
       kendoDropTargetContainer
       ... >
       <kendo-grid></kendo-grid>
    </div>

2. To define the drag and drop targets, configure the directives' properties.

   html

   <div ...
       dragTargetFilter=".k-master-row"
       dropTargetFilter=".k-master-row"
       [dragData]="dragData"
       [hint]="{hintClass: 'rowHint'}"
       (onDrop)="onDrop($event)"
       dragHandle="tr">
   </div>

3. Use the dragData callback to fetch the row index.

   ts

   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.

   ts

   public onDrop(e: DropTargetEvent): void {
       const fromIndex = e.dragData;
       // update data
       this.dragTargetContainer.notify();
       this.dropTargetContainer.notify();
   }

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

Change Theme

Theme

Loading ...

Known Limitations

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

Suggested Links

• ColumnComponent
• API Reference of the GridComponent
• API Index of the Grid
• Drag Grid rows to a custom container