Row Events

Reference for row-related events in AG Grid

Row events are fired in response to row operations such as clicking, editing, dragging, and selection changes.

Overview

Listen to row events using GridOptions callbacks:

const gridOptions = {
  onRowClicked: (event) => {
    console.log('Row clicked:', event.data);
  },
  onRowDoubleClicked: (event) => {
    console.log('Row double-clicked:', event.data);
  }
};

Mouse Events

rowClicked · RowClickedEvent<TData, TContext>

Fired when a row is clicked.

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined (if not set)
• event: The browser event
• isEventHandlingSuppressed: true if suppressMouseEventHandling has returned true

onRowClicked: (event) => {
  console.log('Clicked row:', event.data);
  console.log('Row index:', event.rowIndex);
}

rowDoubleClicked · RowDoubleClickedEvent<TData, TContext>

Fired when a row is double-clicked.

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined
• event: The browser event
• isEventHandlingSuppressed: true if suppressMouseEventHandling has returned true

onRowDoubleClicked: (event) => {
  console.log('Double-clicked row:', event.data);
  // Open detail view, start editing, etc.
}

Selection Events

rowSelected · RowSelectedEvent<TData, TContext>

Fired when a row is selected or deselected.

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined
• event: The browser event
• source: The source that triggered the event

onRowSelected: (event) => {
  if (event.node.isSelected()) {
    console.log('Row selected:', event.data);
  } else {
    console.log('Row deselected:', event.data);
  }
}

Editing Events

rowEditingStarted · RowEditingStartedEvent<TData, TContext>

Fired when row editing starts (only when editType='fullRow').

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined

Module: TextEditorModule / LargeTextEditorModule / NumberEditorModule / DateEditorModule / CheckboxEditorModule / CustomEditorModule / SelectEditorModule / RichSelectModule

onRowEditingStarted: (event) => {
  console.log('Started editing row:', event.rowIndex);
}

rowEditingStopped · RowEditingStoppedEvent<TData, TContext>

Fired when row editing stops (only when editType='fullRow').

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined

Module: TextEditorModule / LargeTextEditorModule / NumberEditorModule / DateEditorModule / CheckboxEditorModule / CustomEditorModule / SelectEditorModule / RichSelectModule

onRowEditingStopped: (event) => {
  console.log('Stopped editing row:', event.rowIndex);
}

rowValueChanged · RowValueChangedEvent<TData, TContext>

Fired when cell value(s) in a row have changed.

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• rowPinned: Either ‘top’, ‘bottom’ or null / undefined

onRowValueChanged: (event) => {
  console.log('Row data changed:', event.data);
  // Save changes to server
}

Grouping Events

rowGroupOpened · RowGroupOpenedEvent<TData, TContext>

Fired when a row group is opened or closed.

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row
• expanded: true if the group is expanded

Module: RowGroupingModule

onRowGroupOpened: (event) => {
  const action = event.expanded ? 'opened' : 'closed';
  console.log(`Row group ${action}:`, event.node.key);
}

Drag & Drop Events

rowDragEnter · RowDragEnterEvent<TData, TContext>

Fired when the mouse enters a row during a drag operation.

Event Properties:

• node: The row node getting dragged
• nodes: The list of nodes being dragged
• event: The underlying mouse move event
• vDirection: Direction of the drag (‘up’, ‘down’ or null)
• overIndex: The row index the mouse is dragging over
• overNode: The row node the mouse is dragging over
• y: The vertical pixel location

Module: RowDragModule

onRowDragEnter: (event) => {
  console.log('Drag entered row:', event.overIndex);
}

rowDragMove · RowDragMoveEvent<TData, TContext>

Fired continuously while the mouse moves during a row drag.

Event Properties:

• node: The row node getting dragged
• nodes: The list of nodes being dragged
• event: The underlying mouse move event
• vDirection: Direction of the drag
• overIndex: The row index the mouse is dragging over
• overNode: The row node the mouse is dragging over
• y: The vertical pixel location

Module: RowDragModule

onRowDragMove: (event) => {
  // Update drag indicator, etc.
}

rowDragLeave · RowDragLeaveEvent<TData, TContext>

Fired when the mouse leaves a row during a drag operation.

Event Properties:

• node: The row node getting dragged
• nodes: The list of nodes being dragged
• event: The underlying mouse move event
• vDirection: Direction of the drag
• overIndex: The row index the mouse is dragging over

Module: RowDragModule

onRowDragLeave: (event) => {
  console.log('Drag left row:', event.overIndex);
}

rowDragEnd · RowDragEndEvent<TData, TContext>

Fired when a row drag operation ends (mouse released).

Event Properties:

• node: The row node getting dragged
• nodes: The list of nodes being dragged
• event: The underlying mouse move event
• vDirection: Direction of the drag
• overIndex: The row index the mouse is dragging over
• overNode: The row node the mouse is dragging over

Module: RowDragModule

onRowDragEnd: (event) => {
  console.log('Drag ended. Dropped at:', event.overIndex);
  // Update row order in your data
}

rowDragCancel · RowDragCancelEvent<TData, TContext>

Fired when a row drag operation is cancelled (e.g., by pressing Escape).

Event Properties:

• node: The row node getting dragged
• nodes: The list of nodes being dragged
• event: The underlying mouse move event

Module: RowDragModule

onRowDragCancel: (event) => {
  console.log('Drag cancelled');
}

Resize Events

rowResizeStarted · RowResizeStartedEvent<TData, TContext>

Fired when row height resizing starts.

Event Properties:

• node: The row node
• event: The mouse event
• rowHeight: The current row height

onRowResizeStarted: (event) => {
  console.log('Resizing row:', event.node.id);
}

rowResizeEnded · RowResizeEndedEvent<TData, TContext>

Fired when row height resizing ends.

Event Properties:

• node: The row node
• event: The mouse event
• rowHeight: The new row height

onRowResizeEnded: (event) => {
  console.log('Row resized to:', event.rowHeight);
}

Virtual Row Events

virtualRowRemoved · VirtualRowRemovedEvent<TData, TContext>

Fired when a virtual row is removed from the DOM (due to row virtualisation).

Event Properties:

• node: The row node
• data: The user provided data for the row
• rowIndex: The visible row index for the row

onVirtualRowRemoved: (event) => {
  // Cleanup any resources associated with this row
}

Batch Events

batchEditingStarted · BatchEditingStartedEvent<TData, TContext>

Fired when batch editing starts.

Event Properties:

• changes: Array of pending cell value changes (initially empty)

Module: BatchEditModule

onBatchEditingStarted: (event) => {
  console.log('Batch editing started');
}

batchEditingStopped · BatchEditingStoppedEvent<TData, TContext>

Fired when batch editing stops (committed or cancelled).

Event Properties:

• changes: Array of cell value changes made during the batch

Module: BatchEditModule

onBatchEditingStopped: (event) => {
  console.log('Batch editing stopped with', event.changes?.length, 'changes');
}

Related APIs

Grid Events

Grid-level events

Column Events

Column interaction events

GridApi

Programmatic row control