AG Studio Launch Week 🚀🚀🚀 28 Sep - 2 Oct 2026 🚀🚀🚀 Join now
AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search
What's New
Getting Started
Quick StartKey FeaturesCommunity vs. Enterprise
AI Features
AI ToolkitMCP ServerSkills
Layout & Styling
Design SystemGrid Layout
Charting
Core Features
Advanced Features

JavaScript Data GridRow Dragging Customisation

Version 36.1.0

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.

The example above 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 with rowSelection.mode = 'multiRow'.
  • Row Drag Managed is being used, but it is not a requirement for Entire Row Dragging.

To enable entire row dragging, set the rowDragEntireRow property to true in the gridOptions as shown below:

const gridOptions = {
    columnDefs: [
        { field: 'country' },
        { field: 'year' },
        { field: 'sport' },
        { field: 'total' }
    ],
    // allows rows to be dragged without the need for drag handles
    rowDragEntireRow: true,

    // other grid options ...
}

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.

The example above 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.

To enable custom row drag text, set the rowDragText callback in the gridOptions as shown below:

const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            rowDrag: true
        }, {
            field: 'country'
        }
    ],
    rowDragText: (params, dragItemCount) => {
        return (
            dragItemCount > 1
                ? (dragItemCount + ' items')
                : params.defaultTextValue + ' is'
        ) + ' being dragged...';
    },

    // other grid options ...
}
rowDragTextCopy Link
RowDragTextFunc
Initial
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.
RowDragModule

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.

The example above 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 the gridOptions will be overridden by the one in the colDef and will display the number of athletes selected.

To enable custom row drag text per column dragger, set the rowDragText callback in the colDef as shown below:

const gridOptions = {
    columnDefs: [
        {
            field: 'athlete',
            rowDrag: true,
            rowDragText: (params, dragItemCount) => {
                const suffix = dragItemCount == 1 ? 'athlete' : 'athletes';
                return `Dragging ${dragItemCount} ${suffix}`;
            }
        }, {
            field: 'country',
            rowDrag: true,
        }
    ],
    rowDragText: (params, dragItemCount) => {
        return (
            dragItemCount > 1
                ? (dragItemCount + ' items')
                : params.defaultTextValue + ' is'
        ) + ' being dragged...';
    },

    // other grid options ...
}

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.

The example above shows a custom cell renderer using the registerRowDragger 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.

To register a custom row dragger inside a custom cell renderer, use the registerRowDragger method from the ICellRendererParams as shown below:

// your custom cell renderer init code
const rowDragger = document.createElement('div')
this.eGui.appendChild(rowDragger);

// register it as a row dragger
params.registerRowDragger(rowDragger);

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.

Full Width Row Dragging Copy Link

It is possible to drag Full Width Rows by registering a Custom Row Dragger.

In the example above, 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 above, 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.

Implement this interface to provide a custom drag and drop image component when dragging parts of the grid.

interface IDragAndDropImageComponent {
    // Optional - props for rendering.
    init?(params: IDragAndDropImageParams): void;

    // Mandatory - Return the DOM element of the component, this is what the grid will display while dragging
    getGui(): HTMLElement;

    // Optional - Gets called once by grid after rendering is finished - if your renderer needs to do any cleanup,
    // do it here
    destroy?(): void;

    // Mandatory - Gets called every time the grid needs to update the label of the Drag Image.
    setLabel(label: string): void;

    // Mandatory - Gets called every time the grid needs to update the icon of the Drag Image.
    setIcon(icon: string | null, shake: boolean): void;
}

IDragAndDropImageParams Copy Link

dragSourceCopy Link
DragSource
DragSource
apiCopy Link
GridApi
The grid api.
contextCopy Link
TContext
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'
    }
}