How to filter rows in agGrid based on display value?

Question

I have agGrid which contains column that has used refData property. It is displaying as "Yes" or "No" but has underlying value as "1" or "0". I want to filter the column by data but it is not giving any result when filter by "Yes" or "No". However filter starts working when I put underlying data i.e. 1 or 0.

HTML File

<ag-grid-angular class="ag-theme-balham" 
            [rowData]="categoryRowData" [columnDefs]="categoryColDef" [domLayout]="domLayout"
            (gridReady)="onGridReady($event)">
       </ag-grid-angular>

TS File

export class CategoryComponent implements OnInit{
    private domLayout;
    private objCategoryEditor = {};
    categoryColDef ;

    constructor()
    {
        this.getCategoryMapping();
        this.createCategoryColDefinition();
    }

    ngOnInit() {        
        this.domLayout = "autoHeight";
    }

    onGridReady(params: any) {            
        params.api.sizeColumnsToFit();
        params.api.resetRowHeights();                                     
    }

    createCategoryColDefinition() {
        this.categoryColDef = [            
        {
            headerName: 'Is Subcategory', field: 'IsSubcategoryText', resizable: true,filter:true,
            editable: function (params: any) {
                return true;
            },
            cellEditor: "agSelectCellEditor",
            cellEditorParams: {
                values: this.extractValues(this.objCategoryEditor),
            },
            refData: this.objCategoryEditor,            
        }
    ]}

    getCategoryMapping()
    {
        this.objCategoryEditor["0"] = "No";
        this.objCategoryEditor["1"] = "Yes";    
        this.createCategoryColDefinition();                     
    }

    extractValues(mappings) {    
        return Object.keys(mappings);            
    }
}

When filter by "No" then it is returning no rows:-

When filter by 0 then it is returning rows:-

How to customize the filtering so that it start returning rows when filter by "Yes" or "No"? Please help on this.

Answer 1

I would use a filterValueGetter in column definition something like this -

 filterValueGetter: this.customfilterValueGetter

here is a simple implementation of customfilterValueGetter

 customfilterValueGetter(params) {
    if(params.data) {
      return this.objCategoryEditor[params.data.IsSubcategoryText];
    }
 }

As per docs -

filterValueGetter(params)
Function or expression. Gets the value for filtering purposes.

Plunkr here. Checkout the Retail Price column