1

I am working on an existing application in which they have used ag-grid library for angular for most of the grids that they have in their application. Now the ag-grid gives the functionality to filter the grid based on a column value by using the filter option in the column header. I am giving a link to that https://www.ag-grid.com/angular-data-grid/filtering-overview/. I wanted to implement a feature in which we can save the filter keyword that the user is searching for and when he comes back to the same grid the previous filter is already applied. for example https://plnkr.co/edit/?p=preview&preview here we can pick athlete and filter that by going to the column and searching a value so what I want is that if I search 'abc' I should be able to preserve that. is there a way to do that ? I am giving the colDef for the link above

this.columnDefs = [
      { field: 'athlete' },
      {
        field: 'age',
        filter: 'agNumberColumnFilter',
        maxWidth: 100,
      },
      {
        field: 'date',
        filter: 'agDateColumnFilter',
        filterParams: filterParams,
      },
      {
        field: 'total',
        filter: false,
      },
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      filter: true,
    };
  }

Any kind of help is appreciated, thanks :)

Shubham Tiwari
  • 959
  • 1
  • 11
  • 32
  • which filter you are talking about here, quick, column or external? your plunker link is not correct. – abhishek sahu Oct 19 '21 at 11:47
  • @abhisheksahu I am talking about the column filter that is there on the column header and I know that there are a handful of attributes like Width, flex, pinned etc that is there on the column state but I need to store the filter keyword that being used to filter and then save that. – Shubham Tiwari Oct 19 '21 at 11:49
  • `onFilterChanged: function() {console.log('onFilterChanged');},` or ` onFilterModified:function() {console.log('onFilterModified');}` you can define this two event in grid deifination whenever a filter get applied you can store the the filter in some variable and can use that filter later – abhishek sahu Oct 19 '21 at 11:57

2 Answers2

1

You can save the filter applied by using the Grid Event onFilterChanged. Inside here you can get the filterModel by calling api.getFilterModel(). In the plunkr below we are showcasing this by saving the filter model to local storage and restoring it by applying it inside the Grid Event onFirstDataRendered


  onFilterChanged(params) {
    const filterModel = params.api.getFilterModel();
    localStorage.setItem('filterModel', JSON.stringify(filterModel));
  }

  onFirstDataRendered(params) {
    const filterModel = JSON.parse(localStorage.getItem('filterModel'));
    if (filterModel) {
      params.api.setFilterModel(filterModel);
    }
  }

See this implemented in the following plunkr

You may also find the following documentation pages relevant:

Saving and Restoring Filter Models

Grid Events

Shuheb
  • 2,012
  • 1
  • 4
  • 6
1

To apply existing filters to ag-grid, it can be done using by setting up filterModel on gridApi.

    gridApi.getFilterInstance("fieldName").setModel({
        "filterType":"equals", //type of filter condition
        "type":"text", //Type of column [text/number/date]
        "filter":"value" //Value need to be applied as filter.
     })

Similarly onFilterChanged event you can capture changes and apply filter dynamically.

rubalvjaiswal
  • 155
  • 8