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

Question

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?

Naren Murali · Accepted Answer · 2022-09-07 07:41:27Z

0

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);
  }

answered Sep 7, 2022 at 7:41

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

shwetha Over a year ago

Thanks for your suggestion, I already tried that, as well as passing the columns like this -> this.gridApi.refreshCells({ force: true, columns: [list of cols] }); but none of them is working

Naren Murali Over a year ago

@shwethasrinivas share working example with the issue and screenshots on what to achieve

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related