Ag-grid valueFormatter and Column Filter

Question

I am having problems using ag-grid valueFormatter and column filters (https://www.ag-grid.com/javascript-data-grid/filtering/).

I have a simple colDef:

{
        headerName: 'My column',
        field: 'myData',
        hide: true,
        valueFormatter: this.formatterBooleanToHuman,
      },

the formatterBooleanToHuman is a simple code to change true to Yes and false to No.

It works as expected, the issue is that we are using column filters, and when I click on the filter I have true and false to select, if I select any of them, nothing returns from the filters because the value now is actually Yes and No.

I couldn't manage to have both of them working together. To have the column filter working properly I need to remove the valueFormatter, but I would like to have both working.

I tried to apply the valueFormatter function to filterParams.valueFormatter, it did change the values on the filter but something is failing, I am getting 2 No and 1 Yes, and none of them filter.

Any suggestions?

UPDATE:

So, I found a solution, but I am not convinced it is the right way to do it.

get getcolumnDef(): Array<ColDef> {
  return [
      {
        headerName: 'Boolean Column',
        field: 'booleanValue',
        hide: true,
        valueFormatter: this.formatterBooleanToHuman,
        filterParams: {
          valueGetter: (params) => this.filterBooleanValueGetter(params, 'booleanValue')
        }
      }
    ];
  }
        
  private filterBooleanValueGetter(params: ValueGetterParams, propertyName: string) {
    let isDeleted = false;

    const hasValue = !!params && !!params.data && params.data[propertyName];

    if (hasValue) {
      isDeleted = String(params.data[propertyName]) === 'true';
    }

    return isDeleted ? 'Yes' : 'No';
  }

So, the valueGetter works as expected and makes my filter work, I just think it is a bit "dirty" to have it to work like that, I haven't found anything on the docs saying this is the way it needs to be done. So suggestions are more than welcome.

Answer 1

valueFormatter applies only to data in grid. However even if the filter shows true and false instead of formatted values, it should work correctly. If filtering does not work, it may indicate some other error in your code. Maybe you depend on this in formatterBooleanToHuman method?

Anyway to format values in filter, you should define filterParams.valueFormatter like this:

{
  // ...
  valueFormatter: this.formatterBooleanToHuman,
  filterParams: {
    valueFormatter: this.formatterBooleanToHuman
  }
}

For some reason, the value given to filter formatter is string instead of boolean (bug in ag-grid?), you need to adjust that.

See complete example here: https://plnkr.co/edit/o3sN3GodqQumVe09