How to automatically refresh cells in ag-grid in an Angular project

Question

Here's my project:

I choose an option from the drop-down menu. I click on the button "Refresh grid" and it refreshes the grid. So the second column gets updated with the number value chosen from column one.

There is a minor issue: When the grid refreshes it restores the drop-down menu to the default value. This may be avoided by refreshing only the second column.

What I want is: the second column to be refreshed automatically without having to use the button.

The fact that the first column has a custom cell renderer component made it difficult for me to find a solution.
Since the method to refresh the grid can only be written in the grid component. Here's why:

grid.component.html

    <button (click)="RefreshRisqueBrutColumn()">Refresh grid</button>
    
    <ag-grid-angular
      style="width: 500px; height: 500px;"
      class="ag-theme-balham"
      [enableSorting]="true"
      [enableFilter]="true"
      [pagination]="true"
      [columnDefs]="columnDefs"
      [rowData]="rowData"
      [frameworkComponents]="frameworkComponents"
      (gridReady)="onGridReady($event)"
      [enableCellChangeFlash]="true"
    >
    </ag-grid-angular>

grid.component.ts code:

     /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */
       private gridApi;
       private gridColumnApi;
       onGridReady(params) {
         this.gridApi = params.api;
         this.gridColumnApi = params.columnApi;
         params.api.sizeColumnsToFit();
       }
       public RefreshRisqueBrutColumn() {
         const params = { force: true };
         this.gridApi.refreshCells(params);
       }
       /**THIS CODE IS RESPONSIBLE FOR REFRESHING THE GRID AFTER VALUES HAVE BEEN CHANGED */

Notice the onGridReady method? That is key in the refresh process. And it can only be binded to gridReady if is defined in the grid.component.ts. I.e: I cannot launch the refresh from the customCellRenderer component.

customCellRenderer.component.html:

    <select class="form-control"  (change)=" UpdateRisqueBrut($event.target);" >
        <br>
        <option id="1">1- Très improbable</option>
        <option id="2">2- Peu probable</option>
        <option id="3">3- Possible</option>
        <option id="4">4- Probable</option>
    </select>
    <br>

relevant code from customCellRenderer.component.ts:

    message:Number;
      constructor(private data: DataService) { }
      ngOnInit() {
      }
      params: any;
      agInit(params: any): void {
        this.params = params;
      }
      proba=5;
      public UpdateRisqueBrut(t) {
        if (t.value === "1- Très improbable") {
        this.data.changeMessage(1)
          this.proba=1;
        } else if (t.value === "2- Peu probable") {
        this.data.changeMessage(2)
          this.proba=2;
        } else if (t.value === '3- Possible') {
        this.data.changeMessage(3)
        } else if (t.value === '4- Probable') {
        this.data.changeMessage(4)
        }
      }

To wrap-up, how can I automatically refresh the second column based on the value chosen in the first column (so from the custom cell renderer component) when the refresh code(and methods) must necessarily be in the grid.component.ts.

E.g.: can I launch a method that would refresh the grid from the custom cell renderer?
Thank you for your time!

Should I inject the grid.component.ts in the customCellRenderer.component.ts. This way I'll be able to launch the refresh method from customCellRenderer.component.ts? — Ahmed Ghrib, May 06 '19 at 11:38
This apparently causes something called circular dependency and crashes the app which makes sense: WARNING in Circular dependency detected: src\app\drop-down-cell-renderer\drop-down-cell-renderer.component.ts -> src\app\app.component.ts -> src\app\drop-down-cell-renderer\drop-down-cell-renderer.component.ts — Ahmed Ghrib, May 06 '19 at 11:52

score 1 · Answer 1 · answered May 06 '19 at 13:34

I cannot launch the refresh from the customCellRenderer component.

This is not correct. params of agInit method of cell editor is of ICellEditorParams and contains api property which is of type GridApi. So you could basically have a function inside Cell Editor that can call params.api.refreshCells(). I don't know if this will solve your issue, but wanted to point out that wrong statement. Most callback params in ag-grid contains these properties not just GridReady.

score 0 · Answer 2 · answered May 06 '19 at 12:34

0

I have found a kinda stupid way to get around this that you can use while we wait for a solid answer.
Just add this in the grid-definition:
(cellMouseOut)="RefreshRisqueBrutColumn()"

answered May 06 '19 at 12:34

Ahmed Ghrib

695
4
13
29

How to automatically refresh cells in ag-grid in an Angular project

grid.component.html

grid.component.ts code:

customCellRenderer.component.html:

relevant code from customCellRenderer.component.ts:

2 Answers2