How to refresh an ag-grid when a change occurs inside a custom Cell Renderer component?

Question

Inside my grid, I have this column:

  {
      headerName: "Generic/Specific",
      field: "genericspecific",
      id: "6",
      cellRenderer:'genericSpecificCellRenderersComponent',
      cellStyle: params => {
        const colors: string[] = ["red", "orange"];
        const genericSpecific: string[] = ["Generic", "Specific"];
        return {
          "background-color": colors[genericSpecific.indexOf(this.selectedOptions[params.node.id])]
        };
      }
    }

As you can see, it has a custom Cell Renderer. Here's its definition:

 @Component({
  selector: "app-generic-specific-renderers",
  template: `
    <hr />
    <select class="form-control" id='0' (change)="updateChosenValue($event.target); refresh(params)">
      <option >{{ selectedOptions[params.node.id] }}</option>
      <option >Specific</option>
      <option >Generic</option>
    </select>
    <hr />
  `
})
export class GenericSpecificCellRenderersComponent implements OnInit {
  updateChosenValue(event) {
    if (event.value==='Specific'){
      this.selectedOptions[this.params.node.id]='Specific'
    }
    else if (event.value==='Generic'){
      this.selectedOptions[this.params.node.id]='Generic'
     }
    }
  selectedOptions:string[]=[];
  constructor(private controlAssessmentData: ControlAssessmentService) {
    this.controlAssessmentData.currentSelectedOptions.subscribe(
      receivedSelectedOptions =>
        (this.selectedOptions = receivedSelectedOptions)
    );
  }
  ngOnInit() {}
  public params: any;
  public gridApi:any;

  // called on init
  agInit(params: any): void {
    this.params = params;
    this.gridApi= params.api;
  }
  // called when the cell is refreshed
  refresh(params: any): boolean {
    this.params = params;
    this.gridApi.refreshCells()
    console.log('this.params: ', this.params);
    return true;
  }
}

I wanted to refresh the grid everytime the user chooses an option from the dropDown list.
I thought my code should work, because I used the same logic when refreshing the grid where it was defined.
However, it didn't.
Any idea why? And maybe how I can solve it?
Thank you!

Precaution

Events causing refresh: Calling api.refreshCells() to inform grid data has changed (see Refresh). – Precaution

Refresh Cells: api.refreshCells(cellRefreshParams) - Gets the grid to refresh all cells. Change detection will be used to refresh only cells who's display cell values are out of sync with the actual value. If using a cellRenderer with a refresh method, the refresh method will get called. – Precaution

ag-grid.com/javascript-grid-cell-rendering-components; ag-grid.com/javascript-grid-refresh – Precaution

Answer 1

When an option is changed (not in refesh() as you have now), run api.refreshCells with the option force set to true. api.refreshCells({ force: true });

If you can, also put the desired rows/columns in the call to avoid redrawing the entire grid.

Etra

This solved my related problem where I'm using an ag-grid to build a tree structure and the column that was not refreshing depended on autoGroupColumnDef.cellRendererParams.innerRenderer – Freeman

api.refreshCells({ force: true }); WORKED! Thanks. – Scud

This is not working for detail grid, of master detail. – Melburn

This solution worked for me. But I had to add api.setRowData(newData); before api.refreshCells({ force: true }); – Sadiron

Answer 2

Refresh on Component Renderer 'mycomponentRenderer' is called for example:

 const rowNode = this.gridApi.getDisplayedRowAtIndex(1);
 rowNode.setDataValue('mycolumn', 'myvalue');
 this.gridApi.refreshCells({ columns: ['mycolumn'] });

and "mycolumn" have to put in the columnDefs during columns configuration in "field" property.

html:

html: <ag-grid-angular
        [rowData]="items"
        [columnDefs]="columnDefs"
        [defaultColDef]="defaultColDef"
        (gridReady)="onGridReady($event)"
        [frameworkComponents]="frameworkComponents">
</ag-grid-angular>

ts:

 this.columnDef[0] = {
            field: 'mycolumn',
            headerName: 'mycolumnHeader',
            cellRenderer: 'mycomponentRenderer',
}

Armful