ag-grid cell-renderer component loses its click-ability when data are updated

Question

I'm having a simple angular component that implements an ag-grid like that:

<ag-grid-angular
  *ngIf="data"
  domLayout='autoHeight'
  class="ag-theme-material"
  suppressFieldDotNotation="true"
  [pagination]="true"
  [paginationPageSize]="5"
  [defaultColDef]="defaultColDef"
  [gridOptions]="gridOptions"
  [frameworkComponents]="frameworkComponents"
  [rowData]="data.rowData"
  [columnDefs]="data.columnDefs"
  (gridReady)="onGridReady($event)"
  (cellKeyPress)="onCellKeyPress($event)">
</ag-grid-angular>

Then I'm using this component inside other components where I need to display grid-able data.

<shared-grid [data]="projectStore.datasetsGridData | async" (action)="onDatasetsTableAction($event)"></shared-grid>

As you can see I'm using an observable to set grid's columnDefs and rowData.

The grid is configured to use a cellRenderer component that implements a clickable element in one of the columns like:

<div (click)="doSomething()">...</div>

I noticed that for those grids that the data ([data] input) continuously change the cell with the custom clickable div loses its clickability as long as the data changes. When new data stop coming up the div is clickable again.

I'm thinking that this is happening due to continuous refreshing of the grid but I'm not 100% sure. If that's the case is there any workaround for this effect to stop happening?

score 0 · Answer 1 · answered Mar 28 '20 at 18:26

There are 2 possible solutions to this issue.

You can implement the refresh() method in your cellRenderer component and handle the refresh logic so that cell renderer component knows what to do if there is data refresh. Here is an example - Handling refresh
Before you do that, there are multiple reasons why refresh is called on cell renderer, if you are not using the preferred api method to set data, then refresh is not called. You will have to manually invoke api.refreshCells() every time data is refreshed for above solution to
work. More on this here - Events causing refresh
If solution 1 is cumbersome, then the easy way out would be to use api.redrawRows() each time your data changes. Think ngOnChanges. Redraw rows recreates the entire DOM of row and applies cell renderer again as if row is newly created. As per docs -

Use redraw row if you want to create the row again from scratch. This is useful when you have changed a property that only gets used when the row is created for the first time such as:

Whether the row is fullWidth or not.

The cellRenderer used for any cell (as this is specified once when the cell is created).

You want to specify different styles for the row via the callbacks
getRowStyle() or getRowClass().

Example - Redraw rows

ag-grid cell-renderer component loses its click-ability when data are updated

1 Answers1