With AG Grid, prevent row click event when cell is clicked?

Question

I'd like to stop event propagation on all cell clicks since I'm using onRowClicked to do some actions. When a user clicks on something inside a cell (like an input field), I don't want the row click to be triggered.

Any thoughts?

I'm using Angular 2/4 for this.

Answer 1

None of the past suggestions worked for me. AG Grid may have changed the API behavior. Even event.stopPropagation() on onCellClicked would not stop onRowClicked from firing.

What I ultimately did was to remove onRowClicked altogether and handle everything in onCellClicked. onRowClicked does not have an attribute on which column the click event generated from, onCellClicked does!

function cellClickedHandler(e) {
  if (e.column.colId === 'col1') {
    // Handle specific cell
  } else {
    // Handle all other cells, similar to rowClicked
  }
}

Answer 2

  <ag-grid-angular style="width: 100%;   height: 168px;" class="ag-theme-fresh" 
    [rowData]="rowData" [columnDefs]="columnDefs"
    [enableFilter]="true" [enableSorting]="true" 
    [getRowNodeId]="getRowNodeId" [rowSelection]="rowSelection" 
    (selectionChanged)="onSelectionChanged($event)"
    (gridReady)="onGridReady($event)" 
    [suppressRowClickSelection]="true"
    (cellClicked)='onCellClicked($event)'>
  </ag-grid-angular>

Use [suppressRowClickSelection]="true" to prevent the row click