Reset the Pinned Bottom Row Data in ag-grid Angular 8

Question

I used pinned bottom row data as a Footer to display the summation of rows in AG-grid, but the problem is, I cant rest the value of pinned Row (the summation is a JSON Object contains the summation values that have been already calculated from Backend).

How could I resolve that without using Aligned Grid as Footer?

Note: the recived summation are not static will changed based on selected ID from drop down list

this._myService.getProjectSummation("",[],selected,selected).subscribe(data=>{

  this.gridApi.setPinnedBottomRowData([]);
  this.gridApi.setPinnedBottomRowData(JSON.parse(data));


});

What I did similar to this Link but in my code, the pinned raw data values are not static it will change based on selected Option from Select

@Shravan What I did is similar to this link but I wanna the value for the same pinned raw dynamic — 3202User
So you basically want the bottom pinned row to update value if the dropdown selection changes? Am I right? This dropdown is it inside AgGrid? — Shravan

Shravan Shravan · Accepted Answer · 2020-03-03T17:50:22

Respond to the dropdown selection changes using the change event on <select> tag and then update your bottom pinned row based on your selection. I have shown this using a simple total calculation of cart items in different currencies as example.

Template file:

<h1>Ag Grid</h1>

<select (change)="calculateTotal($event)">
  <option 
    *ngFor="let item of currency" 
    [value]="item.name"
  >{{ item.name }}</option>
</select>

<ag-grid-angular 
  style="width: 95%; height: 250px" 
  class="ag-theme-balham" 
  [columnDefs]="columns" 
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

Component file:

  calculateTotal(event) {
    let ccyName = event.target.value;
    let ccy = this.currency.find(item => item.name === ccyName);

    this.gridApi.setPinnedBottomRowData([
      { product: `TOTAL (in ${ccy.name})`, price: this.total * ccy.factor }
    ]);
  }

Full example can be found here on the Stackblitz.

Reset the Pinned Bottom Row Data in ag-grid Angular 8

1 Answers