Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Light
Dark
System
Ask  Question

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">
........................


G
Guest 2 years ago
Vue Bootstrap 5 HTML
12 Answers
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)

S
Sean Author2 years ago

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


G
Guest 2 years ago

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.


G
Guest 2 years ago

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


S
Sean Author2 years ago

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


G
Guest 2 years ago


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


G
Guest 2 years ago


const menu = MenuComponent?.getInstance(menuElement);


return null


user
Lauris Stepanovs Author2 years ago

Hi,

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

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


G
Guest 2 years ago


<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>


user
Lauris Stepanovs Author2 years ago

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();


G
Guest 2 years ago


MenuComponent.reinitialization();

Yes that resolve the issue, now its has another issue


G
Guest 2 years ago

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.


user
Lauris Stepanovs Author2 years ago

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  :(