Unmanaged dragging is the default dragging for the grid. To use it, do not set the property rowDragManaged. Unmanaged dragging differs from managed dragging in the following ways:
- The grid does not manage moving of the rows. The only thing the grid responds with is firing drag events. It is up to the application to do the moving of the rows (if that is what the application wants to do).
- Dragging is allowed while sort is applied.
- Dragging is allowed while filter is applied.
- Dragging is allowed while row group or pivot is applied.
It is not possible for the grid to provide a generic solution for row dragging that fits all usage scenarios. The way around this is the grid fires events and the application is responsible for implementing what meets the application's requirements.
Row Drag Events Copy Link
Row drag events are raised by both Managed Row Dragging and unmanaged row dragging.
There are five grid events associated with row dragging which are:
rowDragEnter: A drag has started, or dragging already started and the mouse has re-entered the grid having previously left the grid.rowDragMove: The mouse has moved while dragging.rowDragLeave: The mouse has left the grid while dragging.rowDragEnd: The drag has finished over the grid.rowDragCancel: The drag has cancelled over the grid.
Typically a drag will fire the following events:
rowDragEnterfired once - The drag has started.rowDragMovefired multiple times - The mouse is dragging over the rows.rowDragEndfired once - The drag has finished.
Additional rowDragLeave and rowDragEnter events are fired if the mouse leaves or re-enters the grid. If the drag is finished outside of the grid, then the rowDragLeave is the last event fired and no rowDragEnd is fired, as the drag did not end on the grid.
When the Grid is created, a Drop Zone that is responsible for firing all the Row Drag Events is added to the Grid Body. This why Row Drag Events (including rowDragEnd) are only fired when they happen on top of the Grid. If you need to monitor when a Row Drag ends outside of the Grid, for example, use the DragStopped event.
Each of the four row drag events extend the RowDragEvent interface.
Properties available on the RowDragEvent<TData = any, TContext = any, T extends RowDragEventType = RowDragEventType> interface.
The row node getting dragged. Also the node that started the drag when multi-row dragging. |
The list of nodes being dragged. |
The underlying mouse move event associated with the drag. |
The eventPath persists the event.composedPath() result for access within AG Grid event handlers. |
Direction of the drag, either 'up', 'down' or null (if mouse is moving horizontally and not vertically). |
The row index the mouse is dragging over or -1 if over no row. |
The row node the mouse is dragging over or undefined if over no row. |
The vertical pixel location the mouse is over, with 0 meaning the top of the first row. This can be compared to the rowNode.rowHeight and rowNode.rowTop to work out the mouse position relative to rows. The provided attributes overIndex and overNode means the y property is mostly redundant. The y property can be handy if you want more information such as 'how close is the mouse to the top or bottom of the row?'
|
Details about the row dragging drop target. |
The grid api. |
Application context as set on gridOptions.context. |
Event identifier |
Example Events Copy Link
The below example demonstrates unmanaged row dragging with no attempt by the application or the grid to re-order the rows. This is on purpose to demonstrate that the grid will not attempt to re-order rows unless the rowDragManaged property is set to true. The example also demonstrates all the events that are fired.
From the example the following can be noted:
The first column has
rowDrag=truewhich results in a draggable area included in the cell.The grid has not set
rowDragManagedwhich results in the grid not reordering rows as they are dragged.All of the drag events are listened for and when one is received, it is printed to the console. To best see this, open the example in a new tab and open the developer console.
Because
rowDragManagedis not set, the row dragging is left enabled even if sorting or filtering is applied. This is because your application should decide if dragging should be allowed or suppressed using thesuppressRowDragproperty.While dragging the row, the
setRowDropPositionIndicatorAPI method is called to display the projected row drop location using a horizontal line indicator.
Simple Unmanaged Example Copy Link
The example below shows how to implement simple row dragging using unmanaged row dragging and events. The example behaves the same as the Managed Row Dragging example; however, the logic for moving the rows is in the application rather than the grid.
From the example the following can be noted:
- The property
suppressRowDrag=trueis set by the application depending on whether sorting or filtering is active. This is because the logic in the example doesn't cover these scenarios and wants to prevent row dragging when sorting or filtering is active.
The simple example doesn't add anything that managed dragging gives (the first example on this page).
When dragging Multiple Rows with unmanaged row dragging, the application is in control of what gets dragged. It is possible to use the events to drag more than one row at a time, e.g. to move all selected rows in one go if using row selection.
See also Preventing Dropping on Certain Rows.
Dragging and Row Grouping Copy Link
Row Grouping in the grid allows grouping rows by a particular column. Dragging rows while grouping is possible when doing unmanaged row dragging. The application is responsible for updating the data based on the drag events fired by the grid.
The example below uses row dragging to place rows into groups. It does not try to order the rows within the group. For this reason, the logic works regardless of sorting or filtering.
The example below shows row dragging with Row Grouping where the following can be noted:
- The Athlete column has row drag enabled for non-group rows. This is achieved using the function variant of the
rowDragproperty. - The grid has not set the
rowDragManagedproperty which results in unmanaged row dragging. - The example does not re-order the rows. Instead the example demonstrates putting the rows into groups. If you drag a row, you can place it in a different parent group.
- The example listens to the event
onRowDragMoveand changes the group a row belongs to while the drag is happening. It is the choice of your application whether it wants to move rows in real time during the drag, or wait until the drag action is complete. - The application can still move rows to groups even if ordering or sorting is applied. For this reason, the application does not suppress row dragging if sorting or filtering is applied.
Other Row Models Copy Link
Unmanaged row dragging will work with any of the row models - Infinite, Server-Side and Viewport. With unmanaged dragging, the implementation of what happens when a particular drag happens is up to your application.
Next Up Copy Link
Continue to the next section to learn about Row Dragging Customisation.