Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

Theme functions not working when render/mapping html elements


Hello everyone,

I am using React.js with Metronic 8 Html theme. The dropdown in TR that I added statically when the page loads is working (Top tr). But the dropdown inside the dynamically fetched <tr> of the map function is not triggered. (map loop)
How can I trigger these dynamically created dropdowns.


<tbody className="text-gray-600 fw-bold">
<tr>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={""}/>
</div>
</td>
<td>a</td>
<td>email</td>
<td>phone</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="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">
<div className="menu-item px-3">
<a href="#%22%0D%0A%20className=%22menu-link%20px-3" target="_blank">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0D%0A%20data-kt-users-table-filter=%22delete_row" target="_blank">Delete</a>
</div>
</div>
</td>
</tr>
{
this.state.data ?
this.state.data.map((row)=>(
<tr key={row.id}>
<td>
<div
className="form-check form-check-sm form-check-custom form-check-solid">
<input className="form-check-input" type="checkbox" value={row.id}/>
</div>
</td>
<td>{row.name}</td>
<td>{row.email}</td>
<td>{row.phone}</td>
<td className="text-end">
<button
data-kt-menu-trigger="click"
data-kt-menu-placement="bottom-end"
className={"btn btn-icon btn-bg-light btn-active-color-primary btn-sm me-1"}
>
<i className={"fa fa-edit"}/>
</button>
<div
className="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">
<div className="menu-item px-3">
<a href="#%22%0D%0A%20className=%22menu-link%20px-3" target="_blank">Edit</a>
</div>
<div className="menu-item px-3">
<a href="#%22%20className=%22menu-link%20px-3%22%0D%0A%20data-kt-users-table-filter=%22delete_row" target="_blank">Delete</a>
</div>
</div>
</td>
</tr>)) : null
}
</tbody>


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


Solved;

KTMenu.createInstances();



Thanks Habi! I was scratching my head.. It's actually the same solution when I was dynamically building a custom dataTable and had to add KTUsersList.init() at the end of the script, but didn't occur to me to do this again for the menus.

happy



how to add it in vue?? can you please explain?



Hi,

Try to create a separate small component with menu+submenu, and try to add next code in this component:

useEffect(() => {
MenuComponent.reinitialization() // import from _metronic/assets/ts/components
}, [])



Regards,
Keenthemes support



Hi,

how to add it in Angular?


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