CODEWITHSUNDEEP
ag-grid
Bogdan
Bogdan

Reputation: 696

Ag-Grid QuickFilter changing programmatically searched columns

I need a quick search filter, where user can select what columns are searched. I didn't succeed to implement this behavior. I tried this:

this.columns.forEach(column=>{
            if (this.globalSearchSelectedColumns.indexOf(column.field)>-1) column.getQuickFilterText = (params)=> params.value.name;
            else column.getQuickFilterText = ()=> '';
        });
this.grid.api.setColumnDefs(this.columns);
this.grid.api.onFilterChanged();
this.grid.api.resetQuickFilter();

where this.columns is columns defs, this.grid is gridOptions, this.globalSearchSelectedColumns is the selected columns to search for, by column.field.

Upvotes: 0

Views: 5786

Answers (3)

Bogdan
Bogdan

Reputation: 696

According to nakhodkiin solution I change my code like this:

this.grid.columnApi.getAllColumns().forEach(column=>{
    let def = column.getColDef();
    if (this.globalSearchSelectedColumns.indexOf(def.field)>-1) def.getQuickFilterText = undefined;
    else def.getQuickFilterText = ()=> '';
});
this.grid.api.onFilterChanged();

And it's working;

Upvotes: 0

Pratik Bhat
Pratik Bhat

Reputation: 7614

I think the problem here lies in setting updated column defs.
Can you try this - 

  let newColDef= [];
  this.columns.forEach(column=>{
            if (this.globalSearchSelectedColumns.indexOf(column.field)>-1)
            column.getQuickFilterText = (params)=> params.value.name;
            else column.getQuickFilterText = ()=> '';

            newColDef.push(column);
        });
this.grid.api.setColumnDefs(newColDef);
this.grid.api.onFilterChanged();
this.grid.api.resetQuickFilter();
this.grid.api.refreshHeader();

Ag-grid updated its approach of detecting column changes since v19.1
More details here

As per doc -->

When new columns are set, the grid will compare with current columns and work out which > columns are old (to be removed), new (new columns created) or kept (columns that remain will keep their state including position, filter and sort).

Comparison of column definitions is done on 1) object reference comparison and 2) column ID eg colDef.colId. If either the object reference matches, or the column ID matches, then the grid treats the columns as the same column.

Ag-grid team is also actively working on fixing this issue for v20.1. You can track it on github

Upvotes: -1

nakhodkin
nakhodkin

Reputation: 1465

In order to selectively apply quickFilter form ag-Grid you should rewrite the property getQuickFilterText of the columnDef, by setting it to a function which returns an empty string like so:

  1. First of all, you need to retrieve the column by a key through the gridColumnApi
  2. Then you need to access its colDef
  3. Lastly, all you left to do is to rewrite getQuickFilterText property

Assume, that in your class component you have a method disableFilterCol it can look something like this:

  disableFilterCol = () => {
    var col = this.gridColumnApi.getColumn("athlete");
    var colDef = col.getColDef();
    colDef.getQuickFilterText = () => "";
    console.log("disable Athlete");
  };

Once it called, quickFilter will be applied to your data grid excluding athlete column.

I created live demo for you on ReactJS. You can improve the way you can select multiple columns that you want to rely on doing filtering.

I suppose that in your case you can try to add set getQuickFilterText = () => "" for either definition of colDef from the very beginning and let the user enabling particular columns, you can set getQuickFilterText property for them to undefined to provide sorting among them.

Upvotes: 2

Related Questions