Applying CellStyle on agGrid instantly whenever CellValueChanged

0
votes

I am using agGrid in Angular.

I need to set background color of cell to yellow when cell value changed and background color to red when someone edit to make the value empty.

Here's the code

import { Component, OnInit } from '@angular/core';
import { APICallService } from '../../.././PortalServices/webapicall.service';

@Component({
    selector: 'master-gender',
    templateUrl: 'app/PortalPages/MasterPages/GenderMaster/gender.component.html',
    providers: [APICallService],
})

export class GenderComponent implements OnInit {
    private updateDict = new Map();
    genderRowData: [];  

    constructor(private genderService: APICallService) {
    }

    ngOnInit() {
        this.genderService.getApiCall('getallgenders')
            .subscribe((rowData) => this.genderRowData = rowData,
                (error) => { alert(error) }
            );   
    }

    columnDefs = [
        {
            headerName: 'Gender Name', field: 'Name',                                          
            onCellValueChanged: this.genderCellValueChanged.bind(this)           
        },
    ]

    genderCellValueChanged(event: any) {
        const cell = event.api.getFocusedCell();
        if (event.oldValue !== event.newValue) {
            if (event.newValue == '')
              cell.column.colDef.cellStyle = { 'background-color': 'red' }; 
            else
               cell.column.colDef.cellStyle = { 'background-color': 'yellow' }; 
         }
         event.api.refreshCells(cell);     
    }
}

The cellStyle never applied when cell value changed for first time. However when I try to edit the cell for second time then cellStyle applied. I tried to use redrawRows() but it is affecting whole column which I dont want. I want to change the style of cell whenever value is getting changed.

How to refresh the style instantly?

2
angularag-gridag-grid-angular

2 Answers

2
votes

You have to provide it within ColDef.

Reference: ag-grid - Cell style

columnDefs = [{
  name: 'Gender Name',
  field: 'Name',
  cellStyle: function(params) {
    if (params.value =='') {
        return { backgroundColor: 'red' };
    } else {
        return { backgroundColor: 'yellow' };
    }
  }
},
// your other colDefs
]

When you mark the field as editable and when the value gets updated, the color will get changed.

0
votes

Well I got the answer to my question. Hope this answer will help those who wanted to acheive the same functionality.

Refresh of cell is done forcefully. Below function is modified:-

genderCellValueChanged(event: any) {
        const cell = event.api.getFocusedCell();
        if (event.oldValue !== event.newValue) {
            if (event.newValue == '')
              cell.column.colDef.cellStyle = { 'background-color': 'red' }; 
            else
               cell.column.colDef.cellStyle = { 'background-color': 'yellow' }; 
         }
         let refreshParams = {
            force: true,
            rowNodes: [event.node]
        };
        event.api.refreshCells(refreshParams);   
    }