Ag-Grid hide a mini-filter after 'Apply' button is pressed

Question

I'm using the Enterprise Ag-Grid version in my Angular 6 application. I have a Set Filter in it. I added the 'Apply' button to the filter:

apply: Set to true to include an 'Apply' button with the filter and not filter automatically as the selection changes.

The question is how can I hide the mini filter menu after button is pressed? I didn't find any documentation about this possibility in the official web site. But I find a comment in the internal library src file, specifying in the IComponent.ts:

 /* A hook to perform any necessary operation just after the gui for this component has been renderer
 in the screen.
 If the filter popup is closed and reopened, this method is called each time the filter is shown.
 This is useful for any
 logic that requires attachment before executing, such as putting focus on a particular DOM
 element. The params has one callback method 'hidePopup', which you can call at any later
 point to hide the popup - good if you have an 'Apply' button and you want to hide the popup
 after it is pressed. */
afterGuiAttached?(params?: IAfterGuiAttachedParams): void;

At the moment I can not understand how to set afterGuiAttached function to achieve the goal described above.

Could anyone help me?
Thanks in advance!

I have used ag-grid in the past, and I know enterprise version comes with 24 hours support, why you don't ask there as well? — Hector Sanchez
@Mr. Idk.. StackOverflow is 'closer to me'. Also I expect them to look 'Ag-Grid' tagged questions here.. — user3818229
I think they don't :( I wish I could help you more but I haven't used the newer library, good luck — Hector Sanchez

un.spike un.spike · Accepted Answer · 2018-09-30T09:28:44

As you already checked afterGuiAttached is a part of Filter Component

So this function accessible inside custom filter like here.

So all that you should do is define afterGuiAttached inside:

export class PartialMatchFilter implements IFilterAngularComp {
    afterGuiAttached(params){
        params.hidePopup() <- executing will close the filter
    }
}

afterGuiAttached - would be executed on init as described (but Apply button also would be custom and you should handle it by your self). You can bind hidePopup function to your custom filter parameter and use it when it would be necessary.

export class PartialMatchFilter implements IFilterAngularComp {
    private hideFilter:Function;

    afterGuiAttached(params){
        this.hideFilter = params.hidePopup;
    }
}

Executing this.hideFilter() will close your filter;

I've made a dummy sample based on the referenced demo

Ag-Grid hide a mini-filter after 'Apply' button is pressed

1 Answers