CODEWITHSUNDEEP
angularag-gridag-grid-reactag-grid-ng2ag-grid-angular
Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

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

I have this simple column:
enter image description here

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!

Upvotes: 9

Views: 39769

Answers (3)

walkeros
walkeros

Reputation: 4942

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;
            // },

        }
    };
}

Upvotes: 1

wentjun
wentjun

Reputation: 42526

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.

Upvotes: 13

Ahmed Ghrib
Ahmed Ghrib

Reputation: 757

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

Upvotes: 5

Related Questions