Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Datatable Action menu does not open
Hi, Am have implemented this https://preview.keenthemes.com/metronic8/demo3/apps/user-management/users/list.html and was able to make the listing dynamic, but encountered a problem with the Action menu, it does not popup when clicked.
Replies (6)
data-kt-menu-trigger when clicked does not open the menu? do i need to reinitialise the menu?
Hi,
You will need to reinitialize the KT components when you deal with dynamically populated elements. You can refer to the Bootstrap KTMenu component API documentation here.
Regards.
got it thank you Sean, checking on the document
thank you so much, working great
Ben, could you please show how you solved it. Thanks
after setting the DataTable added KTMenu.createInstances(); on the on("draw"
$(o).DataTable({
info: !1,
order: [],
searchDelay: 500,
processing: true,
serverSide: true,
pagination:true,
stateSave: true,
type:"remote",
ajax:{url: "/select/"+_data, data: {_token: _token}, method: "post"},
columns:[
{data:"name"},
{data:"role"},
{data:"branch"},
{data:"last_login"},
{data:null}
],
pageLength: 10,
lengthChange: !1,
columnDefs: [
{targets: 0,
className: "d-flex align-items-center"},
{targets: -3,
data: null,
orderable: false,
className: "text-end",
render: function (data, type, row) {
return `
<a href="#%22%20class=%22btn%20btn-light%20btn-active-light-primary%20btn-sm%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end%22%20data-kt-menu-flip=%22top-end" target="_blank">
Actions
<span class="svg-icon svg-icon-5 m-0">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<polygon points="0 0 24 0 24 24 0 24"></polygon>
<path d="M6.70710678,15.7071068 C6.31658249,16.0976311 5.68341751,16.0976311 5.29289322,15.7071068 C4.90236893,15.3165825 4.90236893,14.6834175 5.29289322,14.2928932 L11.2928932,8.29289322 C11.6714722,7.91431428 12.2810586,7.90106866 12.6757246,8.26284586 L18.6757246,13.7628459 C19.0828436,14.1360383 19.1103465,14.7686056 18.7371541,15.1757246 C18.3639617,15.5828436 17.7313944,15.6103465 17.3242754,15.2371541 L12.0300757,10.3841378 L6.70710678,15.7071068 Z" fill="#000000" fill-rule="nonzero" transform="translate(12.000003, 11.999999) rotate(-180.000000) translate(-12.000003, -11.999999)"></path>
</g>
</svg>
</span>
</a>
<!--begin::Menu-->
<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4" data-kt-menu="true">
<!--begin::Menu item-->
<div class="menu-item px-3">
<a href="/system_users/create/%60+data.id+%60%22%20class=%22menu-link%20px-3%22%20data-kt-docs-table-filter=%22edit_row" target="_blank">
Edit
</a>
</div>
<!--end::Menu item-->
</div>
<!--end::Menu-->
`;
},
}]
})).on("draw", (function () {
l(), KTMenu.createInstances();
})),
