The New Way to Build with AI! Introducing ReUI — the developer platform for agentic UI with shadcn/ui
Browse ReUI Pro
Light
Dark
System
Ask  Question

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.


B
Ben Yee 4 years ago
Laravel Datatables PHP
6 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (6)

B
Ben Yee 4 years ago

thank you so much, working great


user
Iván Ordoñez 4 years ago

Ben, could you please show how you solved it. Thanks


B
Ben Yee 4 years ago

after setting the DataTable added KTMenu.createInstances(); on the on("draw"

<pre lang="js"> $(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="#" class="btn btn-light btn-active-light-primary btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end" data-kt-menu-flip="top-end"> 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/`+data.id+`" class="menu-link px-3" data-kt-docs-table-filter="edit_row"> Edit </a> </div> <!--end::Menu item--> </div> <!--end::Menu--> `; }, }] })).on("draw", (function () { l(), KTMenu.createInstances(); })), </pre>
B
Ben Yee 4 years ago

got it thank you Sean, checking on the document


user
Sean Author 4 years ago

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.


B
Ben Yee 4 years ago

data-kt-menu-trigger when clicked does not open the menu? do i need to reinitialise the menu?


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds
buy metronic keenthemes mega bundle

ReUI

Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.

ReUI by Keenthemes React Components UI Blocks React Templates ReUI Documentation