CODEWITHSUNDEEP
ag-grid
Sunil kumar
Sunil kumar

Reputation: 337

How to Get Group count in AgGrid

I have set rowgroup:true for one of the column in Aggrid.

I want to display number of groups it created and display it in the footer. How can I do that?

Upvotes: 0

Views: 4221

Answers (1)

wentjun
wentjun

Reputation: 42526

Unfortunately, the ag-grid API does not provide any methods that can allow you to calculate the number of row groups within your group. However, this can be easily counted using Vanilla JavaScript, with the use of JavaScript's Set. First, we get the row nodes data from the grid itself, then we construct a Set that consists of that specific property (in this example, we assume that the row group property is 'country'). Since we can only add unique values to a Set, we can be sure that the size of the Set is the row group count.

countCountries() {
  const rowData = [];
  const countrySet = new Set();
  this.gridApi.forEachNode(node => rowData.push(node.data));
  rowData.map(obj => {
    if (obj) {
      countrySet.add(obj.country);
    }
  });
  console.log(countrySet.size);
  return countrySet.size;
}

Then, we can simply add the count to the footer by implementing pinned rows. You will have to specify the input property binding for pinnedBottomRowData, as well as the event binding for firstDataRendered, such that the country count will be calculated only after the data is rendered.

 <ag-grid-angular
  #agGrid
  style="width: 100%; height: 420px;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [animateRows]="true"
  [enableRangeSelection]="true"
  [rowData]="rowData"
  [pinnedBottomRowData]="pinnedBottomRowData"
  (firstDataRendered)="onFirstDataRendered($event)"
  (gridReady)="onGridReady($event)"
 ></ag-grid-angular>

And on your component.ts itself, 

onFirstDataRendered(event) {
  this.pinnedBottomRowData = this.createData();
}

createData() {
  const result = [];
  result.push({
    country:`count:${this.countCountries()}`,
  });
  return result;
}

I have created a demo for your reference. This should nudge you in the right direction.

Upvotes: 4

Related Questions