Advanced Features

Angular Data GridRow Dragging

Row dragging is used to rearrange rows by dragging the row with the mouse. To enable row dragging, set the column property rowDrag on one (typically the first) column.

Enabling Row Dragging Copy Link

rowDragCopy Link
boolean | RowDragCallback
default: false
boolean or Function. Set to true (or return true from function) to allow row dragging.

To enable row dragging on all columns, set the column property rowDrag = true on one (typically the first) column.

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    // make all rows draggable
    { field: 'athlete', rowDrag: true },
];

It is also possible to dynamically control which rows are draggable by providing a callback function as shown below:

<ag-grid-angular
    [columnDefs]="columnDefs"
    /* other grid options ... */ />

this.columnDefs = [
    // only allow non-group rows to be dragged
    { field: 'athlete', rowDrag: params => !params.node.group },
];

There are two ways in which row dragging works in the grid, managed and unmanaged:

  • Managed Row Dragging: This is the simplest, where the grid will rearrange rows as you drag them.
  • Unmanaged Row Dragging: This is more complex and more powerful. The grid will not rearrange rows as you drag. Instead the application is responsible for responding to events fired by the grid and rows are rearranged by the application.

See also:

Next Up Copy Link

Continue to the next section to learn about Managed Row Dragging.