How to launch a method after a cell value has been edited in ag-grid?

Question

I have this simple column:

Here's its definition:

{
      headerName: "Activité",
      field: "activite",
      editable: true,
       , cellClass: "cell-wrap-text"
      }  

Here's the method I want to launch every time the user enters a new input in that column.

  public UpdateActValue() {
      this.data.sendActToBia(this.params.data.activite);
      }  

Here are my questions:
1/ Are there any ag-grid "native" way to launch a particular method after a cell value from a column has been edited?
2/ Should I simply define a custom cell renderer and do all the necessary work there?
Thank you!

Safier

Answer 1

You can make use of the cellValueChanged event binding to detect changes in cell value.

On your component.html, you can simply bind the onCellValueChanged() method to the cellValueChanged event.

<ag-grid-angular 
.
.
(gridReady)="onGridReady($event)"
(cellValueChanged)="onCellValueChanged($event)"
>

And on your component.ts, you will define the onCellValueChanged() method, which will be fired every single time any cell value has changed.

onCellValueChanged(event) {
  // handle the rest here
}

You may read up more about grid cell editing and change detection over here.

Colorblind

Thanks, I have just posted a complete answer. Just like yours but with a minor detail of detecting which column has been affected by the change. Thank you! – Safier

Btw, do you have any idea how I can detect in which the row the change happened? Just like I detected in which column? – Safier

@AhmedGhrib Yes, you can use cellValueChanged for that purpose too. On the very same method, you can detect the index of the changed row by doing event.rowIndex. – Colorblind

I have found a simple way: params.node.id with the same event listener. Thank you again – Safier

Answer 2

I have just found a simple way to do this. I hope it helps.

In grid.component.html:

Add this inside the grid definition:

  (cellValueChanged)="onCellValueChanged($event)"

In the grid.component.ts: Define the method:

onCellValueChanged(params) {
    const colId = params.column.getId();
    if (colId === "activite") {
      this.data.sendActToBia(params.data.activite);
}
  }

Safier

Answer 3

Please note that there might be a case when onCellValueChanged is if you defined custom cell valueSetter, for example via gridOptions.

This is what was happening for my in Angular 6. Below if you uncomment valueSetter you will not get onCellValueChanged called.

private initGridOptions(mappingId: number) {
    this.gridOptions = {
        defaultColDef: {
            onCellValueChanged: (event) => {
                console.log("Fired for column");
                console.log(event);
            },

            // IF YOU UNCOMMENT Value Setter onCellValueChanged will not get fired
            // valueSetter: value => {
            //     return false;
            // },

        }
    };
}

Schwarzwald