How to called this.getRowStyle function forcefully in Angular 7?-CodePudding

I'm using getRowStyle function, but it seems it runs only once when the grid is loaded or it is edited. How do I force run this function manually so that row colors are loaded.

conditonalFormatter() {
    this.GridRef.rowConditionalFormatting('red', this.rowFormatData);
}

rowConditionalFormatting(rowColor, rowFormatData) {
    this.rowFormatData = rowFormatData;
    this.getRowStyle = params => {
            for (let i = 0; i < this.rowFormatData.length; i  ) {
                const columnHeader = this.rowFormatData[i].Name;
                const operator = this.rowFormatData[i].Operator;
                const cellValue = this.rowFormatData[i].Value;
                if (params.data[columnHeader] == cellValue) {
                    return {background: rowColor };
                }
            } 
        }
}

CodePudding user response：

If you want to manually apply the row styling again, then you will need to refresh Aggrid manually with refreshCells().

Generally, only those rows where data is changed is redrawn and other rows are ignored. In your case, we will need to force aggrid to redraw the rows and hence will have to use force=true

gridApi.refreshCells({
      force: true // skips change detection -> always refreshes the row
   })

You will get gridApi object, in onGridReady callback provided by aggrid.

public onGridReady(params) {
    /**
    * Function is called when grid is instantiated.
    * @param params Ag grid params
    */
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
  }

HTML code:

<ag-grid-angular  [columnDefs]="columnDefs [gridOptions]="gridOptions" (gridReady)="onGridReady($event)"></ag-grid-angular>

CodePudding user response：

After several try I am able to acheive my objecttive as per below code, just call this.getRowStyle outside -

rowConditionalFormatting(rowColor, rowFormatData) {
   this.rowFormatData = rowFormatData;
   this.rowColor = rowColor;    
}

 this.getRowStyle = params => {
    for (let i = 0; i < this.rowFormatData.length; i  ) {
        const columnHeader = this.rowFormatData[i].Name;
        const operator = this.rowFormatData[i].Operator;
        const cellValue = this.rowFormatData[i].Value;
        if (params.data[columnHeader] == cellValue) {
            return {background: this.rowColor };
        }
    }    
 }