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:
@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!");
}
}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?
Replies (3)
Impressive post! Please know how much I appreciate it, and how much I look forward to reading your future writings.
escape road
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
