ag - grid + angular 4 custom text filter

Question

I have a column called Account Verification which return values either true or false. I formatted the value on table to Yes and No, but when filtering the column, I still have to search true or false to be able to filter the column. I made a custom filter condition but it did not work. Anyone has solution?

columns = [
    {
        headerName: 'Account Verification', field: 'accountVerified', filter: 'agTextColumnFilter',
        // Cell renderer 
        valueFormatter: (data) => {
            if (data.value === true) return 'Yes';
            else return 'No';
        },
        // Custom filter
        filterParams: {
            condition: (searchTerm, cellValue) => {
                if (searchTerm === 'Yes' || 'yes') {
                    return cellValue === true;
                } else if (searchTerm === 'No' || 'no') {
                    return cellValue === true;
                } else return cellValue === null;
            }
        }
    }
]

"ag-grid": "^18.0.1"

Answer 1

I think the best way to implement this - is to use built in methods of ag-grid, like:

• onFilterModified
• onFilterChanged

And there provide the logic, which would be transform the filter value to true/false.

Or, use javascript to add event listener on apply button of the filter (if you are using apply button to apply your filter), which would call fucntion for transform your value.

Have no example in the moment, but I develped solution for filter validation (custom) in the same way.

Answer 2

Try one of these options:

• Similar to to valueFormatter in your column definition, use a valueGetter also. There is also this method available in column definition (filterValueGetter(params) - Function or expression. Gets the value for filtering purposes.)
• You can add a new field in your data model that you initialize to Yes/No based on the values of the original field that has true/false. Then in the column definitions, you can use this new field to display in the grid.
• Alternatively, you can write a custom filter component. See the custom Angular filter example on the ag-grid site.

Answer 3

You can use TextFormatter within the filterParams to modify the filter value during filtering:

filterParams: { textFormatter: (filterValue) => 'yourvalueformatter' }

https://www.ag-grid.com/javascript-grid-filter-text/#text-formatter

Answer 4

I had the same issue and went through all the inbuilt filters. Finally I was able to fix the issue by following the below steps Steps :

1. Install the ag-grid-enterprise package. (npm install ag-grid-enterprise)

2. Set the filter to agSetColumnFilter. (filter: 'agSetColumnFilter')

3. Add filterParams and specify the same valueFormatter which you used in the column definition

   filterParams: {
      valueFormatter: (data) => {
          if (data.value === true) return 'Yes';
          else return 'No';  
       }
   }