Dropdown menu button in Datatables Row
I've got a Datatable rendering via Ajax, and in columnDefs for the "Actions" column I am rendering an "Actions" button that should trigger the dropdown menu. This is the same example as the Datatables Ajax Server Side in the documentation https://preview.keenthemes.com/html/metronic/docs/general/datatables/server-side
I've tried adding KTMenu.createInstances(); in the Datatables callBack but I'm having no luck with the dropdown menu appearing.
<td><a href="#%22%20class=%22btn%20btn-sm%20btn-light%20btn-active-light-primary%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank">Actions</a><div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" ><div class="menu-item px-3"><a href="/good/apps/ecommerce/catalog/edit-product.html%22%20class=%22menu-link%20px-3" target="_blank">Edit</a></div><div class="menu-item px-3"><a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-ecommerce-product-filter=%22delete_row" target="_blank">Archive</a></div></div></td>This is the cell with the Action button in it, any ideas? or am I missing something obvious.
Cheers
Replies (3)
Hi Andrew,
The code you provided looks fine.
Does this menu work outside of datatable?
Do you render table data asynchronously?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Hi Lauris,
There are other menus outside of the table that work, I will try and move this to the toolbar to test this section of code - but they look the same.
The table is rendered async and the table cell itself is done via the columnDef option in datatables.
columnDefs: [
{
"defaultContent": "-",
"targets": "_all"
},
{
"targets": 5,
"width": "120px",
"sortable": false,
"render": function (data, type, row) {
var button = "<a href="#%22%20class=%22btn%20btn-sm%20btn-light%20btn-active-light-primary%22%20data-kt-menu-trigger=%22click%22%20data-kt-menu-placement=%22bottom-end" target="_blank">Actions<span class="svg-icon svg-icon-5 m-0"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.4343 12.7344L7.25 8.55005C6.83579 8.13583 6.16421 8.13584 5.75 8.55005C5.33579 8.96426 5.33579 9.63583 5.75 10.05L11.2929 15.5929C11.6834 15.9835 12.3166 15.9835 12.7071 15.5929L18.25 10.05C18.6642 9.63584 18.6642 8.96426 18.25 8.55005C17.8358 8.13584 17.1642 8.13584 16.75 8.55005L12.5657 12.7344C12.2533 13.0468 11.7467 13.0468 11.4343 12.7344Z" fill="currentColor"></path></svg></span></a>";
var menu = "<div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" data-popper-placement="bottom-end" >"
+ "<div class="menu-item px-3"><a href="/good/apps/ecommerce/catalog/edit-product.html%22%20class=%22menu-link%20px-3" target="_blank">Edit</a></div>"
+ "<div class="menu-item px-3"><a href="#%22%20class=%22menu-link%20px-3%22%20data-kt-ecommerce-product-filter=%22delete_row" target="_blank">Archive</a></div></div>";
return button + menu;
}
}
],Cheers
Hi,
Since our component is initialized on first-page load but content of your datatable renderers asynchronously you need to recall KTMenu.createInstances();.
You can call this function inside datatable 'draw' event.
datatable.on("draw", function () {
KTMenu.createInstances();
}Regards,
Lauris Stepanovs,
Keenthemes Support Team
