javascriptangularag-gridag-grid-ng2

Custom filter: can I have custom buttons for filter?


I am trying to have my own custom filter on .
Apart from Apply button, I also want to have other buttons for the filter. i.e. if I can explain this in some sort of UI,

|--Custom Filter-------------------.
| Filter Text: _____________ |
| Apply | Clear | Clear All|
|_______________________|

By using default filter component of ag-grid, I know that I can have two buttons I need if I provide filterParams in ColDef.

filterParams: {
    applyButton: true,
    clearButton: true
}

But what about the other custom (Clear All) button? Is there any way I can achieve it?


Solution

  • Achieved it after few hours of search and trial-error.

    Have a look at the example given here: ag-Grid Angular Custom Filter Component Have a look at the PartialMatchFilterComponent and its code.

    After some code updates for template and component, we can achieve it.

    Update the template:

    <button (click)="apply()">Apply</button>
    <button (click)="clear()">Clear</button>
    <!-- any other buttons you want to keep -->
    

    Little update in the component code: Just need to call this.params.filterChangedCallback() on Apply button click.

    apply(): void {
        this.params.filterChangedCallback();
    }
    clear(): void {
        this.text = '';
        this.params.filterChangedCallback();
    }
    onChange(newValue): void {
        if (this.text !== newValue) {
            this.text = newValue;
            // this.params.filterChangedCallback(); - remove
        }
    }