Ag-Grid скрывает мини-фильтр после нажатия кнопки «Применить»

Question

Я использую версию Enterprise Ag-Grid в своем приложении Angular 6.У меня есть Set Filter .Я добавил кнопку «Применить» к фильтру:

apply: установите значение true, чтобы включить кнопку «Apply» в фильтр, а не фильтр автоматически при изменении выбора.

Вопрос в том, как скрыть меню мини-фильтра после нажатия кнопки?Я не нашел никакой документации об этой возможности на официальном веб-сайте.Но я нахожу комментарий во внутреннем файле src библиотеки, указывающий на 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;

В настоящий момент я не могу понять, как установить функцию afterGuiAttached для достижения цели, описанной выше.

Может ли кто-нибудь мне помочь?
Заранее спасибо!

Answer 1

Как вы уже проверили, afterGuiAttached является частью Filter Component

Так что эта функция доступна внутри пользовательского фильтра как здесь .

Таким образом, все, что вам нужно сделать, это определить afterGuiAttached внутри:

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

afterGuiAttached - будет выполнено на init, как описано (но кнопка Применить также будет пользовательской, и вы должны обработать ее с помощьюсам).Вы можете привязать функцию hidePopup к своему пользовательскому параметру фильтра и использовать ее, когда это будет необходимо.

export class PartialMatchFilter implements IFilterAngularComp {
    private hideFilter:Function;

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

Выполнение this.hideFilter() закроет ваш фильтр;

Я сделал фиктивный образец на основе указанной демонстрационной версии