CODEWITHSUNDEEP
ag-gridag-grid-ng2
user2429448
user2429448

Reputation: 551

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?

Upvotes: 18

Views: 36464

Answers (5)

playtoh
playtoh

Reputation: 391

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)
}

Upvotes: 16

Aaron Hudon
Aaron Hudon

Reputation: 5839

v24.0.0

The best way to implement this, is to apply your default filter in the firstDataRendered callback.

e.g.

onFirstDataRendered(params) {
   //... apply your default filter here
}

Upvotes: 1

wctiger
wctiger

Reputation: 1061

In my case I need to restore Ag-Grid's Set Filter when grid loads. Inspired by the accepted answer, my understanding is the filter instance api can only be accessed after grid data is ready (NOT gridReady), as it needs to aggregate row data to populate its filter list.

Therefore, as #3 adviced in @Fabian's answer, I have set up event listeners when row data changes.

You can also listen to one of the grid events that are emitted when the grid date changes and then apply the filter https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

In a similar use case I believe this is a better approach than set up an arbitrary timeout number before accessing the filter instance as it may end up with inconsistent results.

Upvotes: 1

user9915241
user9915241

Reputation: 61

I ended up doing this.

var FilterComponent = gridOptions.api.getFilterInstance('Status');
FilterComponent.selectNothing(); //Cleared all options
FilterComponent.selectValue('Approved')  //added the option i wanted
FilterComponent.onFilterChanged();

Upvotes: 6

Fabian
Fabian

Reputation: 393

I think the problem is, that the grid resets the filter when new rows are loaded. There are multiple ways to approach this:

  1. The predefined filter types have a filter parameter called newRowsAction
    https://www.ag-grid.com/javascript-grid-filter-text/#params

    newRowsAction: What to do when new rows are loaded. The default is to reset the filter. If you want to keep the filter status between row loads, then set this value to 'keep'.

  2. This answer suggests to set the gridOptions property deltaRowDataMode=true

  3. You can also listen to one of the grid events that are emitted when the grid date changes and then apply the filter https://www.ag-grid.com/javascript-grid-events/#miscellaneous: rowDataChanged, rowDataUpdated

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.

Upvotes: 5

Related Questions