CODEWITHSUNDEEP
angularag-grid
Geraint Anderson
Geraint Anderson

Reputation: 3393

Set AG filter before rows are rendered

I'm using AG Grid to display client side data. There are some preset filters that I need to apply before rendering any data. I'm doing this by calling setFilterModel on the gridApi on the gridReady event, but this is too late. The data has already rendered at that point so I get all the data showing briefly before the filter is applied and rows are then removed again.

onGridReady(params) {
    this.gridOptions.api.sizeColumnsToFit();
    params.api.setFilterModel(this.filterModel);
}

Is there an event I can use, or a way to access the grid API to set the filter model before rendering any data?

I have created a Stackblitz demo showing the problem. The demo only shows a brief flicker, but it takes longer to refresh the data with custom renderers, more columns etc.

https://stackblitz.com/edit/ag-grid-set-initial-filter-state-so-64426323?file=src/app/app.component.ts

Thanks,

Upvotes: 1

Views: 2257

Answers (1)

Fletch
Fletch

Reputation: 917

Use the onFirstDataRendered() method:

<ag-grid-angular
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered()">
</ag-grid-angular>

private gridApi;
private gridColumnApi;

onGridReady(params: AgGridEvent) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;
}

onFirstDataRendered() {
    this.gridApi.setFilterModel(this.filterModel);
}

Upvotes: 0

Related Questions