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.

score 11 · Answer 1 · edited Jun 02 '20 at 20:38

11

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
  }
}

edited Jun 02 '20 at 20:38

jtate

2,612
7
25
35

answered Jun 02 '20 at 12:46

Albi

119
1
4

`e` from above is type of `CellClickedEvent` where colId is not accessible due to being private. Use instead `getColId()`. – hastrb Jan 12 '21 at 17:02

score 5 · Answer 2 · edited Feb 26 '18 at 07:35

5

  <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

edited Feb 26 '18 at 07:35

Paritosh

11,144
5
56
74

answered Feb 23 '18 at 11:22

Farida Anjum

529
6
12

1

This actually is a **workaround**. What if we want to enable selection while clicking a row, and also have `(rowClicked)` event? – Paritosh Oct 17 '18 at 10:09
if that is the case then add (rowSelected)="onRowClicked($event)" (rowClicked)="onRowClicked($event)", in the method in if(( event.type == 'rowSelected')) {} like this put a condition and do. – Farida Anjum Dec 06 '18 at 04:07
This works well. You just need to capture the event of the onclick and then you can use event.colDef.colId to check the column. If it matches what you want then you can do your logic including setting the row to be selected or clicked. – n4nite Feb 11 '20 at 02:19

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

2 Answers2