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

Handling events on Metronic Tailwind CSS components in Blazor

I am attempting to use Metronic (9.x) with Blazor, and have started a project based on the official sample found here: https://github.com/keenthemes/metronic-tailwind-html-integration/tree/638f04486f737a6c5b86edf51666b8eb72469fb8/metronic-tailwind-blazor-server

Although I have to point out, this hardly qualifies as a "Blazor" sample since it is really just html, served up with Blazor. That is exactly the problem though, since I cannot figure out how to do something as simple as create a dropdown with clickable items that can be captured with @onchange or @onclick events.

For example, if I look at the official Metronic Tailwind CSS docs for Dropdown (https://keenthemes.com/metronic/tailwind/docs/components/dropdown) and Menu (https://keenthemes.com/metronic/tailwind/docs/components/menu/) then I was hoping to be able to do something like this:

<pre> @page "/stacks" <PageTitle>MyPage</PageTitle> <div class="dropdown" data-dropdown="true" data-dropdown-trigger="click"> <button class="dropdown-toggle btn btn-light"> Show Dropdown </button> <div class="dropdown-content w-full max-w-56 py-2"> <div class="menu menu-default flex flex-col w-full"> @foreach (var myItem in allItems) { <div class="menu-item"> <a class="menu-link" @onclick="HandleMyClickEvent"> <span class="menu-icon"> <i class="ki-outline ki-badge"> </i> </span> <span class="menu-title"> Menu item @myItem.Name </span> </a> </div> } </div> </div> </div> @code { private List<MyClass> allItems = new(); public class MyClass { public Guid Id { get; set; } public string Name { get; set; } } protected override async Task OnInitializedAsync() { allItems = new List<MyClass>() { new MyClass() { Id = Guid.NewGuid(), Name = "foo", }, new MyClass() { Id = Guid.NewGuid(), Name = "bar", } }; } private async Task HandleMyClickEvent(MouseEventArgs e) { Console.WriteLine("Event has been triggered!"); } } </pre>

However, the @onclick delegation does not trigger. In fact it doesn't look like any of the built-in Blazor delegators (such as @onchange etc.) can be triggered anywhere, so I assume that I am supposed to somehow tap into the built-in metronic events. (see https://keenthemes.com/metronic/tailwind/docs/components/menu#events).

How am I supposed to set this up?

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


Was this issue eventually resolved by replacing the link element with a button, or was JavaScript interop required for the Metronic events? mykaasih.my


 
Deleted comment
 
Deleted comment

None of the blazor events work on any of the divs.

We want to be able to use the metronic events though (such as these https://keenthemes.com/metronic/tailwind/docs/components/menu#events). Could you please provide (or point me to) code samples on how we are supposed to use them? I assume we have to set up JS Interops based on the contents of metronic/dist/assets/js/core.bundle.js, but I am unable to find any documentation on how to approach this.



Hi,

The Blazor event should work when you are using it inside our HTML markup.

Could it be that the problem is related to the event usage on the link tag?
The link tag causes a redirect which can be a real reason why you do not see the event trigger result.

Also, please let me know if you have any errors in your browser console.

Regards,
Lauris Stepanovs,
Keenthemes Support Team


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  :(
buy metronic keenthemes mega bundle

ReUI

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