Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to pre-set column filter in ag-grid

I have an Ionic/Angular app using ag-grid. I would like certain grids to have a filter automatically applied when the grid is loaded - without the user having to do anything.

I tried the following:

onGridReady(params) {
  params.api.sizeColumnsToFit();
  // get filter instance
  var filterComponent = params.api.getFilterInstance("isActive");
  // OR set filter model and update
  filterComponent.setModel({
    type: "greaterThan",
    filter: 0
  });
  filterComponent.onFilterChanged();
}

but it did nothing. Any ideas?

like image 379
user2429448 Avatar asked Mar 23 '18 11:03

user2429448


People also ask

How do you preset a column filter on ag-Grid?

The default is to reset the filter. If you want to keep the filter status between row loads, then set this value to 'keep'. These should all keep the filter when the data changes but I think you still need a bit of extra logic (setting a flag) if you want the filter only on the first load.

How do you enable filters for fields in ag-Grid?

The property can have one of the following values: boolean : Set to true to enable the default filter. The default is Text Filter for AG Grid Community and Set Filter for AG Grid Enterprise. string / Component : Provide a specific filter to use instead of the default filter.


1 Answers

Edit: AgGrid included a onFirstDataRendered callback in version 24.0, as stated in later comments. The original answer below is now only relevant for versions which pre-date this functionality.

onFirstDataRendered(params) {
    var filterComponent = params.api.getFilterInstance("isActive");

    filterComponent.setModel({
        type: "greaterThan",
        filter: 0
    });

    filterComponent.onFilterChanged();
}

Reproduced your problem in a couple of their example older plunks, seemed to be alleviated by adding a small delay. Just venturing a guess that maybe the DOM isn't completely ready yet, although the grid is.

Pre-onFirstDataRendered versions:

onGridReady(params) {
params.api.sizeColumnsToFit();

setTimeout(() => {
    var filterComponent = params.api.getFilterInstance("isActive");
    filterComponent.setModel({
      type: "greaterThan",
      filter: 0
    });
    filterComponent.onFilterChanged();
    },150)
}
like image 110
playtoh Avatar answered Sep 28 '22 11:09

playtoh