There are some options that can be used to customise the Row Drag experience, so it has a better integration with your application.
Entire Row Dragging Copy Link
When using row dragging it is also possible to reorder rows by clicking and dragging anywhere on the row without the need for a drag handle by enabling the rowDragEntireRow
grid option as shown below:
const [columnDefs, setColumnDefs] = useState([
{ field: 'country' },
{ field: 'year' },
{ field: 'sport' },
{ field: 'total' }
]);
// allows rows to be dragged without the need for drag handles
const rowDragEntireRow = true;
<AgGridReact
columnDefs={columnDefs}
rowDragEntireRow={rowDragEntireRow}
/>
The example below demonstrates entire row dragging with Multi-Row Dragging. Note the following:
- Reordering rows by clicking and dragging anywhere on a row is possible as
rowDragEntireRow
is enabled. - Multiple rows can be selected and dragged as
rowDragMultiRow
is also enabled withrowSelection.mode = 'multiRow'
. - Row Drag Managed is being used, but it is not a requirement for
Entire Row Dragging
.
Cell Selection is not supported when rowDragEntireRow
is enabled.
Custom Row Drag Text Copy Link
When a row drag starts, a "floating" DOM element is created to indicate which row is being dragged. By default, this DOM element will contain the same value as the cell that started the row drag. It's possible to override that text by using the gridOptions.rowDragText
callback.
A callback that should return a string to be displayed by the rowDragComp while dragging a row.
If this callback is not set, the current cell value will be used.
If the rowDragText callback is set in the ColDef it will take precedence over this, except when
rowDragEntireRow=true . |
const [columnDefs, setColumnDefs] = useState([
{
field: 'athlete',
rowDrag: true
}, {
field: 'country'
}
]);
const rowDragText = (params, dragItemCount) => {
return (
dragItemCount > 1
? (dragItemCount + ' items')
: params.defaultTextValue + ' is'
) + ' being dragged...';
};
<AgGridReact
columnDefs={columnDefs}
rowDragText={rowDragText}
/>
The example below shows dragging with custom text. The following can be noted:
- When you drag a row of the year 2012, the
rowDragText
callback will add (London Olympics) to the floating drag element.
Custom Row Drag Text with Multiple Draggers Copy Link
If the grid has more than one column set with rowDrag=true
, the rowDragText
callback can be set in the colDef
.
const [columnDefs, setColumnDefs] = useState([
{
field: 'athlete',
rowDrag: true
}, {
field: 'country',
rowDrag: true,
rowDragText: (params, dragItemCount) => {
const suffix = dragItemCount == 1 ? 'country' : 'countries';
return `Dragging ${dragItemCount} ${suffix}`;
}
}
]);
const rowDragText = (params, dragItemCount) => {
return (
dragItemCount > 1
? (dragItemCount + ' items')
: params.defaultTextValue + ' is'
) + ' being dragged...';
};
<AgGridReact
columnDefs={columnDefs}
rowDragText={rowDragText}
/>
The example below shows dragging with custom text and multiple column draggers. The following can be noted:
When you drag a row with a year of 2012 by the country row dragger, the
rowDragText
callback will add (London Olympics) to the floating drag element.When you drag the row by the athlete row dragger, the
rowDragText
callback in thegridOptions
will be overridden by the one in thecolDef
and will display the number of athletes selected.
Row Dragger inside Custom Cell Renderers Copy Link
Due to the complexity of some applications, it could be handy to render the Row Drag Component inside of a Custom Cell Renderer. This can be achieved by using the registerRowDragger
method in the ICellRendererParams as follows:
// your custom cell renderer code
// this will hold the reference to the element you want to act as row dragger.
const myRef = useRef(null);
useEffect(() => {
props.registerRowDragger(myRef.current!);
});
When using registerRowDragger
you should not set the property rowDrag=true
in the Column Definition. Doing that will cause the cell to have two row draggers.
The example below shows a custom cell renderer using theregisterRowDragger
callback to render the Row Dragger inside itself.
- When you hover the cells, an arrow will appear, and this arrow can be used to drag the rows.
Full Width Row Dragging Copy Link
It is possible to drag Full Width Rows by registering a Custom Row Dragger.
In the example below, only the full width rows are draggable.
Row Dragger with Custom Start Drag Pixels Copy Link
By default, the drag event only starts after the Row Drag Element has been dragged by 4px
, but sometimes it might be useful to start the drag with a different drag threshold. For example, start dragging as soon as the mousedown
event happens (dragged by 0px
). For that reason, the registerRowDragger
takes a second parameter to specify the number of pixels that will start the drag event.
In the example below, the drag event starts as soon as mousedown is fired.
Custom Drag and Drop Image Copy Link
The drag and drop image can be customised via the grid properties dragAndDropImageComponent
and dragAndDropImageComponentParams
.
const CustomDragAndDropImage = (props: CustomDragAndDropImageProps) => {
return <div>{props.label}</div>;
};
The following props are passed to the Custom Component (CustomDragAndDropImageProps
interface).
CustomDragAndDropImageProps Copy Link
The label provided by the grid about the item being dragged. |
The name of the icon provided by the grid about the current drop target. |
true if the grid is attempting to scroll horizontally while dragging. |
DragSource |
The grid api. |
Application context as set on gridOptions.context . |
Custom Params Copy Link
On top of the parameters provided by the grid, you can also provide your own parameters. This is useful if you want to allow configuring the component. For example, you might have parts of the grid that you want to highlight with a different colour.
colDef = {
dragAndDropImageComponent: MyDragAndDropImageComponent;
dragAndDropImageComponentParams : {
accentColour: 'SlateGray'
}
}
Next Up Copy Link
Continue to the next section to learn about Row Dragging to an External DropZone.