Listen to menu events to do manual stuff

Hello,

I am using menu for filters and all I need to do is when user close the menu(by clicking out side on page), I have to reset filters options since filters are not applied. So I have to check that in hide event. Could you please guide me how to achieve that?

button
type="button"
class="btn btn-light-primary position-relative me-5"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
@data-kt-menu-hide="customFun"
v-on:hide="customFun"
>
Function
</button>
<!--begin::Menu 1-->
<div
class="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
data-kt-menu="true"
@data-kt-menu-trigger-hide="customFun"
v-on:hide="customFun"
>
<!--begin::Header-->
<div class="px-7 py-5">
........................

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (12)

Hi,

You can refer to KTMenu API. This is the documentation for the core JS version and you can use it for Vue as well.

Regards

Yes, I have seen that. It has bunch of public functions available. But is there a way to listen to onHide event or something like that? If you could provide a sample code that would be great.

hide(DOMElement item) will hide a menu, I need to call a clear filters when menu internal hide is invoked.

Hi,

Sure, you can use the below event API:

var menuElement = document.querySelector("#filter_dropdown");
var menu = KTMenu.getInstance(menuElement);
// Fire before hide
menu.on('kt.menu.dropdown.hide', function() {
eturn false; // return false to prevent menu from closing
});

You can also use kt.menu.dropdown.hidden, kt.menu.dropdown.show, kt.menu.dropdown.shown events as well.

You can also refer to the source of KTMenu: /Users/shuhratsaipov/www/keenthemes/products/core/html/rc/js/components/menu.js. We will provide full documentation for the KTMenu soon.

Regards

onMounted(() => {
nextTick(() => {
const menuElement = document.querySelector(
"#filter_dropdown"
) as HTMLElement;
console.log(menuElement);
if (menuElement) {
const menu = MenuComponent.getInstance(menuElement);
// Fire before hide
if (menu) {
menu.on("kt.menu.dropdown.shown", function () {
console.log("object");
return false; // return false to prevent menu from closing
});
}
}
});
});

No luck

const menu = MenuComponent?.getInstance(menuElement);

return null

Hi,

Could you please attach your menu element HTML code as well?

Look like your menu HTML element wasn't initialized as a MenuComponent.

<template>
<!--begin::Filter-->
<button
type="button"
class="btn btn-light-primary position-relative me-5"
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
v-if="options && options.length"
>
<!--begin::Svg Icon | path: icons/duotune/general/gen031.svg-->
<span class="svg-icon svg-icon-2">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M19.0759 3H4.72777C3.95892 3 3.47768 3.83148 3.86067 4.49814L8.56967 12.6949C9.17923 13.7559 9.5 14.9582 9.5 16.1819V19.5072C9.5 20.2189 10.2223 20.7028 10.8805 20.432L13.8805 19.1977C14.2553 19.0435 14.5 18.6783 14.5 18.273V13.8372C14.5 12.8089 14.8171 11.8056 15.408 10.964L19.8943 4.57465C20.3596 3.912 19.8856 3 19.0759 3Z"
fill="black"
/>
</svg>
</span>
<!--end::Svg Icon-->Filter
<span
class="position-absolute top-0 start-100 translate-middle badge badge-circle badge-primary"
v-if="activeFilter"
>{{ activeFilter }}</span
>
</button>
<!--begin::Menu 1-->
<div
class="menu menu-sub menu-sub-dropdown w-300px w-md-325px"
data-kt-menu="true"
>
<!--begin::Header-->
<div class="px-7 py-5">
<div class="fs-5 text-dark fw-bolder">Filter Options</div>
</div>
<!--end::Header-->
<!--begin::Separator-->
<div class="separator border-gray-200"></div>
<!--end::Separator-->
<!--begin::Content-->
<div class="px-7 py-5" data-kt-user-table-filter="form">
<!--begin::Input group-->
<div class="mb-5" v-for="(item, i) in items" :key="i">
<label class="form-label fs-6 fw-bold">{{ item.label }}:</label>
<input
v-if="item.type === 'text'"
class="form-select form-select-solid fw-bolder"
type="text"
v-model="models[item.key]"
:name="item.key"
v-bind="item.attrs"
/>
<div v-if="item.type === 'select' && item.options">
<select
class="form-select form-select-solid fw-bolder"
data-placeholder="Select"
v-model="models[item.key]"
:name="item.key"
v-bind="item.attrs"
>
<option></option>
<option
v-for="(option, o) in item.options"
:key="o"
:value="option.value"
>
{{ option.label }}
</option>
</select>
</div>
<div v-if="item.type === 'autocomplete' && item.options">
<Multiselect
v-bind="item.attrs"
v-model="models[item.key]"
:close-on-select="false"
:searchable="true"
:create-option="true"
:options="item.options"
/>
</div>
<div
class="form-check form-switch form-switch-sm form-check-custom form-check-solid"
v-if="item.type === 'checkboxes'"
>
<input
class="form-check-input"
type="checkbox"
v-model="models[item.key]"
:name="item.key"
v-bind="item.attrs"
/>
<label class="form-check-label"> {{ item.label }} </label>
</div>
<div
class="position-relative d-flex align-items-center"
v-if="item.type === 'date'"
>
<!--begin::Icon-->
<!--begin::Svg Icon | path: icons/duotune/general/gen014.svg-->
<span class="svg-icon svg-icon-2 position-absolute mx-4">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
>
<path
opacity="0.3"
d="M21 22H3C2.4 22 2 21.6 2 21V5C2 4.4 2.4 4 3 4H21C21.6 4 22 4.4 22 5V21C22 21.6 21.6 22 21 22Z"
fill="black"
/>
<path
d="M6 6C5.4 6 5 5.6 5 5V3C5 2.4 5.4 2 6 2C6.6 2 7 2.4 7 3V5C7 5.6 6.6 6 6 6ZM11 5V3C11 2.4 10.6 2 10 2C9.4 2 9 2.4 9 3V5C9 5.6 9.4 6 10 6C10.6 6 11 5.6 11 5ZM15 5V3C15 2.4 14.6 2 14 2C13.4 2 13 2.4 13 3V5C13 5.6 13.4 6 14 6C14.6 6 15 5.6 15 5ZM19 5V3C19 2.4 18.6 2 18 2C17.4 2 17 2.4 17 3V5C17 5.6 17.4 6 18 6C18.6 6 19 5.6 19 5Z"
fill="black"
/>
<path
d="M8.8 13.1C9.2 13.1 9.5 13 9.7 12.8C9.9 12.6 10.1 12.3 10.1 11.9C10.1 11.6 10 11.3 9.8 11.1C9.6 10.9 9.3 10.8 9 10.8C8.8 10.8 8.59999 10.8 8.39999 10.9C8.19999 11 8.1 11.1 8 11.2C7.9 11.3 7.8 11.4 7.7 11.6C7.6 11.8 7.5 11.9 7.5 12.1C7.5 12.2 7.4 12.2 7.3 12.3C7.2 12.4 7.09999 12.4 6.89999 12.4C6.69999 12.4 6.6 12.3 6.5 12.2C6.4 12.1 6.3 11.9 6.3 11.7C6.3 11.5 6.4 11.3 6.5 11.1C6.6 10.9 6.8 10.7 7 10.5C7.2 10.3 7.49999 10.1 7.89999 10C8.29999 9.90003 8.60001 9.80003 9.10001 9.80003C9.50001 9.80003 9.80001 9.90003 10.1 10C10.4 10.1 10.7 10.3 10.9 10.4C11.1 10.5 11.3 10.8 11.4 11.1C11.5 11.4 11.6 11.6 11.6 11.9C11.6 12.3 11.5 12.6 11.3 12.9C11.1 13.2 10.9 13.5 10.6 13.7C10.9 13.9 11.2 14.1 11.4 14.3C11.6 14.5 11.8 14.7 11.9 15C12 15.3 12.1 15.5 12.1 15.8C12.1 16.2 12 16.5 11.9 16.8C11.8 17.1 11.5 17.4 11.3 17.7C11.1 18 10.7 18.2 10.3 18.3C9.9 18.4 9.5 18.5 9 18.5C8.5 18.5 8.1 18.4 7.7 18.2C7.3 18 7 17.8 6.8 17.6C6.6 17.4 6.4 17.1 6.3 16.8C6.2 16.5 6.10001 16.3 6.10001 16.1C6.10001 15.9 6.2 15.7 6.3 15.6C6.4 15.5 6.6 15.4 6.8 15.4C6.9 15.4 7.00001 15.4 7.10001 15.5C7.20001 15.6 7.3 15.6 7.3 15.7C7.5 16.2 7.7 16.6 8 16.9C8.3 17.2 8.6 17.3 9 17.3C9.2 17.3 9.5 17.2 9.7 17.1C9.9 17 10.1 16.8 10.3 16.6C10.5 16.4 10.5 16.1 10.5 15.8C10.5 15.3 10.4 15 10.1 14.7C9.80001 14.4 9.50001 14.3 9.10001 14.3C9.00001 14.3 8.9 14.3 8.7 14.3C8.5 14.3 8.39999 14.3 8.39999 14.3C8.19999 14.3 7.99999 14.2 7.89999 14.1C7.79999 14 7.7 13.8 7.7 13.7C7.7 13.5 7.79999 13.4 7.89999 13.2C7.99999 13 8.2 13 8.5 13H8.8V13.1ZM15.3 17.5V12.2C14.3 13 13.6 13.3 13.3 13.3C13.1 13.3 13 13.2 12.9 13.1C12.8 13 12.7 12.8 12.7 12.6C12.7 12.4 12.8 12.3 12.9 12.2C13 12.1 13.2 12 13.6 11.8C14.1 11.6 14.5 11.3 14.7 11.1C14.9 10.9 15.2 10.6 15.5 10.3C15.8 10 15.9 9.80003 15.9 9.70003C15.9 9.60003 16.1 9.60004 16.3 9.60004C16.5 9.60004 16.7 9.70003 16.8 9.80003C16.9 9.90003 17 10.2 17 10.5V17.2C17 18 16.7 18.4 16.2 18.4C16 18.4 15.8 18.3 15.6 18.2C15.4 18.1 15.3 17.8 15.3 17.5Z"
fill="black"
/>
</svg>
</span>
<!--end::Svg Icon-->
<!--end::Icon-->
<!--begin::Input-->
<!-- <input
class="form-control form-control-solid ps-12 vz-datepicker"
placeholder="Pick date"
value-format="YYYY-MM-DD"
v-model="models[item.key]"
:name="item.key"
v-bind="item.attrs"
/> -->
<el-date-picker
value-format="YYYY-MM-DD"
v-model="models[item.key]"
placeholder="Select a date"
:name="item.key"
v-bind="item.attrs"
/>
<!--end::Input-->
</div>
</div>
<!--end::Input group-->

<!--begin::Actions-->
<div class="d-flex justify-content-end">
<button
type="reset"
class="btn btn-light btn-active-light-primary fw-bold me-2 px-6"
data-kt-menu-dismiss="true"
data-kt-user-table-filter="reset"
@click="resetFilter"
>
Reset
</button>
<button
type="submit"
class="btn btn-primary fw-bold px-6"
data-kt-menu-dismiss="true"
data-kt-user-table-filter="filter"
@click="updateFilter"
>
Apply
</button>
</div>
<!--end::Actions-->
</div>
<!--end::Content-->
</div>
<!--end::Menu 1-->
<!--end::Filter-->
</template>

I don't see the element with filter_dropdown id, you need to add it to element with data-kt-menu="true" attribute.

Also before getting the element could you please try to reinitialize MenuComponent.

MenuComponent.reinitialization();

MenuComponent.reinitialization();

Yes that resolve the issue, now its has another issue

I have created a wrapper on menu-component and using it in a component that is loaded/mounted dynamically, it's not working for that. But same component I am using when page loads it's working there. Any guess what's missing?

I can provide code for wrapper component.

Hi

Could you please send a code of your mounted function?

If you want to create one instance of a menu component then you can use createInstance function of MenuComponent.

MenuComponent.createInsance("your-selector");

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(