Angular Data GridManaged Row Dragging

In managed row dragging, the grid is responsible for rearranging the rows as the rows are dragged. Managed dragging is enabled with the property rowDragManaged=true.

The example below shows simple managed dragging. The following can be noted:

• The first column has rowDrag=true which results in a draggable area being included in the cell.
• The property rowDragManaged is set, to tell the grid to move the row as the row is dragged.
• If a sort (click on the header) or filter (open up the column menu) is applied to the column, the draggable icon for row dragging is hidden. This is consistent with the constraints explained after the example.

The logic for managed dragging is simple and has the following constraints:

• Works with Client-Side row model only; not with the Infinite, Server-Side or Viewport row models.
• Does not work if Pagination is enabled.
• Does not work when sorting is applied. This is because the sort order of the rows depends on the data and moving the data would break the sort order.
• Does not work when filtering is applied. This is because a filter removes rows making it impossible to know the 'real' order of rows when some are missing.
• Does not work when row grouping or pivot is active. This is because moving rows between groups would require a knowledge of the underlying data which only your application knows.

These constraints can be bypassed by using Unmanaged Row Dragging.

See also Row Dragging with Tree Data for Tree Data, that supports both managed and unmanaged row dragging.

See also Row Drag Events.

Suppress Move When Dragging Copy Link

By default, the managed row dragging moves the rows while you are dragging them. This effect might not be desirable due to your application design. To prevent this default behaviour, set suppressMoveWhenRowDragging to true in the gridOptions.

Multi-Row Dragging Copy Link

It is possible to drag multiple rows at the same time, when rowDragMultiRow is set to true in the gridOptions and it is combined with rowSelection.mode='multiRow'.

For this example note the following:

• When you select multiple items and drag one of them, all items in the selection will be dragged.
• When you drag an item that is not selected while other items are selected, only the unselected item will be dragged.

Suppress Row Drag Copy Link

You can hide the draggable area by setting the grid option suppressRowDrag = true.

The example below is almost identical to the Managed Dragging example with the following differences:

• The Suppress button will hide the drag icons.
• The Remove Suppress button will un-hide the drag icons.
• Applying a sort or a filter to the grid will also suppress the drag icons.

Preventing Dropping on Certain Rows Copy Link

The isRowValidDropPosition callback allows you to control whether a row drop is allowed during managed or unmanaged row dragging, and optionally override the rows, parent or position for the drop. This is useful for restricting where rows can be dropped or customizing drop behaviour. Returning an object allows instead to filter the rows to drop, or change the parent or the position of the drop.

This affects also the icon and label shown when dragging a row for both managed and unmanaged row dragging.

Next Up Copy Link

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