CODEWITHSUNDEEP
filterag-grid-angular
thomasg1967
thomasg1967

Reputation: 1

How to create custom floating filter component in ag-grid that uses "inRange" filter type

I'm trying to build a custom filter component that takes a range from a text input control (e.g. '3-5') to filter the data. To do so I have modified the example given in the ag-grid documentation (see code below).

When changing the type in onFloatingFilterChanged() to 'equals', 'greaterThan', 'lessThan' etc. everything works fine. But with type 'inRange' no filtering is performed.

Working example can be found on Plunkr: https://plnkr.co/edit/oHWFIaHgWIDXP0P5

import { Component } from '@angular/core';

import {
  IFloatingFilter,
  IFloatingFilterParams,
  NumberFilter,
  NumberFilterModel,
} from '@ag-grid-community/all-modules';
import { AgFrameworkComponent } from '@ag-grid-community/angular';

export interface RangeFloatingFilterParams extends IFloatingFilterParams {
  value: number;
}

@Component({
  template: `
    <input
      type="text"
      [(ngModel)]="currentValue"
      (ngModelChange)="valueChanged()"
      style="width: 70px;"
    />
  `,
})
export class RangeFloatingFilter
  implements IFloatingFilter, AgFrameworkComponent<RangeFloatingFilterParams> {
  private params: RangeFloatingFilterParams;

  public currentValue: string;

  agInit(params: RangeFloatingFilterParams): void {
    this.params = params;
    this.currentValue = '';
  }

  valueChanged() {
    let valueToUse = this.currentValue === 0 ? null : this.currentValue;
    this.params.parentFilterInstance(function(instance) {
      (<NumberFilter>instance).onFloatingFilterChanged(
        'inRange',
        valueToUse
      );
    });
  }

  onParentModelChanged(parentModel: NumberFilterModel): void {
    if (!parentModel) {
      this.currentValue = 0;
    } else {
      // note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
      // so just read off the value and use that
      this.currentValue = parentModel.filter;
    }
  }
}

Upvotes: 0

Views: 6109

Answers (2)

Yulia
Yulia

Reputation: 53

Faced the same issue with custom floating datepicker. I used setModelIntoUi method instead of onFloatingFilterChanged:

instance.setModelIntoUi({
   type: 'inRange',
   dateFrom: moment(value.min).format('YYYY-MM-DD'), // you have to use exactly this date format in order for it to work
   dateTo: moment(value.max).format('YYYY-MM-DD'),
});

And in your case with numbers it'll be:

instance.setModelIntoUi({
   type: 'inRange',
   filter: value.min,
   filterTo: value.max,
});

UPD: Added this line

instance.onUiChanged(true);

after the setModelIntoUi method, because of the bug: filter model wasn't updating on second use.

Upvotes: 2

Jarrod Verhagen
Jarrod Verhagen

Reputation: 1

The code inside instance.onFloatingFilterChanged() only sets the first from value. Use these lines below to get the correct result, as it is the only way to get inRange working.

instance.setTypeFromFloatingFilter('inRange');
instance.eValueFrom1.setValue(this._input1.value);
instance.eValueTo1.setValue(this._input2.value);
instance.onUiChanged(true);

Upvotes: 0

Related Questions