refreshCells Not working in Ag-Grid with horizontal scrolling- Angular 8

shwetha srinivas 0
Viewed 29

I am new to AG-Grid, we have multiple columns with horizontal scroll. I am using cellClass to validate and show the red border if cell is empty. also on click of save I'm trying to call refresh this.gridApi.refreshCells() to refresh the cells. But the issue is on calling refreshCells() it refreshes the cells that are currently visible in the view and not all the columns in table.

I have columnDefs defined like this:

{
  headerName: 'A', field: 'A',
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: this.getChannelTypeArray.bind(this),
  cellClass: this.emptyCellClass.bind(this)
},
{
  headerName: 'B', field: 'B',
  cellEditor: 'agSelectCellEditor',
  cellEditorParams: this.getChannelSubTypeArray.bind(this),
  cellClass: this.emptyCellClass.bind(this)
},.. upto around 20 columns

and cellClass:

emptyCellClass(params: CellClassParams) {
    if (!params.value || params.value == FieldConstants.SELECT_OPTION) {
      this.validationPassed = false;
      return FieldConstants.OUTER_RED_CLASS;
    }
  }

I'm using the variable validationPassed to check if all the validations are passed, and finally onSave

OnSave() {
    this.validationPassed = true;
    this.gridApi.refreshCells({
      force: true
    });
   // Other options I have tried:
   // gridOptions.api.redrawRows();
   if(this.validationPassed){
     //perform db call
   } else {
     //show error message
   }
}

Ideally refreshCells() should trigger the cellClasses of all columns and based on that the variable validationPassed will be set again.

But it refreshes only the columns that is visible in current view

Can anyone please help here?

ag-grid-angular ag-grid angular
1 Answers

As per the official docs of refreshCells api You can just set an extra parameter to hard refresh all the cells!

refreshCells = (
    params: RefreshCellsParams<TData> = {}
) => void;

interface RefreshCellsParams<TData = any> {
  // Skip change detection, refresh everything. 
  force?: boolean; // <-                                   this one!
  // Skip cell flashing, if cell flashing is enabled. 
  suppressFlash?: boolean;
  // Optional list of row nodes to restrict operation to 
  rowNodes?: RowNode<TData>[];
  // Optional list of columns to restrict operation to 
  columns?: (string | Column)[];
}

So it will be

hardRefreshGrid() {
    var params = {
      force: true,
    };
    this.gridApi.refreshCells(params);
  }
Naren Murali0
Related