CODEWITHSUNDEEP
angularag-gridag-grid-angular
Tanishka Bansal
Tanishka Bansal

Reputation: 59

Ag-Grid Edit Cell Color If Edited

This is my typescript code and I have applied (cellValueChanged)="onCellValueChanged($event)" in <ag-grid-angular> in html. But it doesn't changes the color of cell as soon its edited, it changes it after it is edited twice.

onCellValueChanged(params:any){
    if(params.oldValue != params.newValue) {
      params.colDef.cellStyle =  { backgroundColor: 'green'}; 
    }
    console.log(params);
    console.log(this.agGrid.api.refreshCells());
  }

Upvotes: 1

Views: 2912

Answers (1)

ViqMontana
ViqMontana

Reputation: 5688

Firstly, to fix your problem, you need to force the refresh when calling api.refreshCells():

var p = {
  force: true
};
this.gridApi.refreshCells(p);

This will change the cell style first time after editing.

Secondly, you're updating the cell style of your entire column instead of the specific cell. What you should do is set the cellStyle on the column definition to display your green background if the cell has been edited. This means you will need to keep a record of the edited cells.

columnDefs = [
    {
      field: 'make',
      editable: true,
      cellStyle: params => {
        debugger;
        if (this.editedRowIndexes.includes(params.node.rowIndex)) {
          return { backgroundColor: 'green' };
        }
      }
    },
    { field: 'model' },
    { field: 'price' }
  ];

  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
  ];

  gridApi;
  editedRowIndexes = [];

  onGridReady(params) {
    this.gridApi = params.api;
  }

  onCellValueChanged(params: any) {
    if (!this.editedRowIndexes.includes(params.node.rowIndex)) {
      this.editedRowIndexes.push(params.rowIndex);
    }
    this.editedRowIndexes.push(params.rowIndex);
    var p = {
      force: true
    };
    this.gridApi.refreshCells(p);
  }

Each time a cell is edited, keep a record of the rowIndex in the array editedRowIndexes, then use this array to determine if you should display a green background or not.

Demo.

Upvotes: 2

Related Questions