How to preserve cellStyle change after page change or column sort in agGrid

Question

I am using agGrid Community Version in Angular 8 project. I want to change the cell style of "Request Number" column whenever anyone edits "Business Rule Description" column in same row. Everything is working perfectly but when I change the page or sort the columns of the grid then cell style applied to whole "Request Number" column.

HTML File

<ag-grid-angular class="ag-theme-balham" [pagination]="true" [gridOptions]="busRuleGridOptions"
            [rowData]="busRuleRowData" [columnDefs]="busRuleColDef" [paginationPageSize]=10 [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
        </ag-grid-angular>

TS File

export class BusinessRuleComponent implements OnInit {
    busRuleRowData: any[]; 
    busRuleGridOptions: any; 
    private domLayout;

    constructor(private businessRuleCommonService: CommonFunctionService) {       
    }

    ngOnInit() {
        this.domLayout = "autoHeight";        
        this.getAllBusinessRule();       
    }

    onGridReady(params: any) {            
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();                                     
    }

    getAllBusinessRule()
    {
        this.businessRuleCommonService.getEntityData('getallbusinessrules')
            .subscribe((rowData) => this.busRuleRowData = rowData,
                (error) => { alert(error) }); 
    }

    busRuleColDef = [
        {
            headerName: 'Business Rule Description', field: 'BusinessRuleDesc', resizable: true,
            editable: function (params: any) {
                return params.data.IsPublished;
            },            
            cellEditor: 'agLargeTextCellEditor',
            cellEditorParams: {
                maxLength: '255',
                cols: '20',
                rows: '3'
            },           
            onCellValueChanged: this.busRuleCellValueChanged.bind(this),
        },
        {
            headerName: 'Request Number', field: 'RequestNumber',                                    
        }
    ]

    busRuleCellValueChanged(event: any) {
        this.busRuleGridOptions.columnApi.getColumn("RequestNumber").colDef.cellStyle = { 'background-color': 'lightsalmon' };                                      
        const rowNode = this.busRuleGridOptions.api.getRowNode(event.node.rowIndex);
        event.api.refreshCells({
             force: true, 
             columns:["RequestNumber"],
             rowNodes: [rowNode]        
        });
    }
}

It worked fine when I edit 2nd Row as shown below:-

Things gone wrong when I did page change or sort the column. Here I changed page and you can see that previous cell style applied to all rows even I didnt edit anything:-

Please suggest me how to preserve the cell style change after page change or sort column in agGrid? If there is better way to meet my objective then also please suggest.

Answer 1

You should save, in the row's data, that it changed. And use a conditional style in the "RequestNumber" cell.

Try something like this:

busRuleColDef = [
  {
    ...
    {
      headerName: 'Request Number',
      field: 'RequestNumber',                                    
      cellStyle: function(params) {
        if (params.data.changed) {
          return { 'background-color': 'lightsalmon' };
        } else {
          return null;
        }
      }
    }
  ]

...

busRuleCellValueChanged(event: any) {
  event.data.changed = true;
}