Custom filter with dropdown in ag-grid is not working in angular 10

Question

I have created a Grid with ag-grid in my angular application. There is a column which name is Category. The rows of this column can only contain A or B or C value. Now I want to create a custom filter with dropdown containing A,B and C value. The code is given below:

Component HTML:

<select [(ngModel)]="currentValue" (ngModelChange)="valueChanged()" class="form-control">
    <option value=""></option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
</select>

Component TS:

import { Component, OnInit } from '@angular/core';
import { AgFrameworkComponent } from 'ag-grid-angular';
import { FilterChangedEvent, IAfterGuiAttachedParams, IFloatingFilter, IFloatingFilterParams, TextFilterModel } from 'ag-grid-community';

export interface SelectFloatingFilterParams extends IFloatingFilterParams {
  selectedValue: string;
}

@Component({
  selector: 'app-category-floating-filter',
})
export class CategoryFloatingFilterComponent implements IFloatingFilter, AgFrameworkComponent<SelectFloatingFilterParams> {
  params: SelectFloatingFilterParams;
  currentValue: string;

  agInit(params: SelectFloatingFilterParams): void {
    this.params = params;
    this.currentValue = this.params.selectedValue;
  }

  valueChanged() {
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilterModel) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  }

  onParentModelChanged(parentModel: TextFilterModel): void {
    if (!parentModel) {
      this.currentValue = "";
    }
    else {
      this.currentValue = parentModel.filter;
    }
  }
}

But during compiling time I am getting error which is given below:

Property 'onFloatingFilterChanged' does not exist on type 'TextFilterModel'.

24 instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));

It means onFloatingFilterChanged does not exist in TextFilterModel class. So how I can filter the grid after choosing a value from dropdown. Can anyone help me please.

mnu-nasir mnu-nasir · Accepted Answer · 2021-02-14T07:10:07

I have found my answer. the code is given below:

agInit(params: SelectFloatingFilterParams): void {
    this.params = params;
    this.currentValue = this.params.selectedValue;
  }

  valueChanged() {
    let valueToUse = this.currentValue === '' ? null : this.currentValue;
    this.params.parentFilterInstance((instance: TextFilter) =>
      instance.onFloatingFilterChanged('equals', valueToUse === '' ? null : valueToUse));
  }

  onParentModelChanged(parentModel: TextFilterModel): void {
    if (!parentModel) {
      this.currentValue = "";
    }
    else {
      this.currentValue = parentModel.filter;
    }

Custom filter with dropdown in ag-grid is not working in angular 10

1 Answers