How to change background color of subsequent cell on cell value changed?

Question

I am using agGrid which contains following columns:-

genderColDef = [
        {
            headerName: 'Gender Name', field: 'Name',            
            onCellValueChanged: this.genderCellValueChanged.bind(this),        
        },
        {
            headerName: 'Request Number', field: 'RequestNumber',          
            cellStyle: { 'background-color': null }                  
        },             
    ];

When I edit column named "Gender Name" then it should change background color of field "Request Number" so that user understands that it is also mandatory to fill. I have added following code in cell value changed function:-

 genderCellValueChanged(event: any) {        
        if (event.newValue != event.oldValue)
            this.genderColDef[1].cellStyle = { 'background-color': 'red'};         

        let refreshParams = {
            force: true,
            rowNodes: [event.node]
        };
        event.api.refreshCells(refreshParams); 
        console.log(this.genderColDef); 
    }

However this is not changing the background color of cell. Can you please tell me the reason?

Answer 1

onCellValueChanged should be on the gridOptions object, not on the column definition. If you move it there, then it should work.