Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

Handling events on Metronic Tailwind CSS components in Blazor

$
0
0

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?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>