How to use the menu with events

Radzen.Blazor Components
1

I really like the menu control and would like to use it for a reason that doesn't use the path, but does call a method when clicked, similar to how "button @click=..." does.

Is there a way to call a method from inside of a MenuItem from where I can call an event, or some other way to call an event?

thanks

2

Hi @Daniel,

UPDATE: Using the click attribute no longer works because the Menu component now has a dedicated Click event.

The menu item supports custom attributes. This allows you to set a click handler

 <RadzenMenuItem Text="Text" @onclick="@(args => Console.WriteLine(args))">
</RadzenMenuItem>

UPDATE: Using the click attribute no longer works because the Menu component now has a dedicated Click event.

3

Thanks,
I gave up too soon. It appears it does allow a click hanlder, but only on the first menuitems menuitem.
The menuitems have to highlight from mouse-over, and only the first one in each column will highlight.
I have tried reversing the order and it still holds true, the one that would not highlight before now highlights, and vice verse.
Edit: On a hunch I put back the style="height:120px" and this fixed it.
thank you, and your product is great! I am sure I will be a paying subscriber after this virus thing is over.

4

This example doesn't work.
Click on RadzenMenuItem doesn't fire onclick event.

5

Do you have to determine the selected menu item by the text property?

6

i have same issue what i am missing has any one solved it ?

7

You can check the update of this post:

8

image
image1976×174 25.3 KB

thats what exactly i did but its not working

9

Your code still shows plain HTML @onclick not RadzenMenu Click.

10

You are the boss! thank you .. here is how i did it.

image
image1911×316 37.7 KB

11

and then

image
image1648×337 17.3 KB

12

Could we Have a Click event for the RadzenMenuItem?

1 Like
13

I struggled with this a bit so hopefully this may help. My main problem was not paying attention to the fact the Click goes on the menu level. Not on the Menu Item. This solution is for a hybrid navigation where some items change the page. Other Items simply swap out the items on the current page. This is a test only page so it is small, I don't recommend this if you have media on the page. Please excuse the icons as I am still working on this. If it has been more than a month since this post you will be able to see it in action at EasyOnlineResume.com

image
image1011×360 44.1 KB

Code
image

14

Just in case anyone is curious about the landing page. Here is that code
image

15

While onclick is taken, you can use onmousedown or onmouseup. Here's a working example from one of my apps:

    <RadzenMenu Style="z-index: 999">
        <RadzenMenuItem Text="Grid Page Size" Icon="grid_on" Style="z-index: 999;">
            <RadzenMenuItem Text="15" @onmouseup="@(() => SetPageSize(15))"></RadzenMenuItem>
            <RadzenMenuItem Text="30" @onmouseup="@(() => SetPageSize(30))"></RadzenMenuItem>
            <RadzenMenuItem Text="60" @onmouseup="@(() => SetPageSize(60))"></RadzenMenuItem>
            <RadzenMenuItem Text="100" @onmouseup="@(() => SetPageSize(100))"></RadzenMenuItem>
        </RadzenMenuItem>
        <RadzenMenuItem Text="Refresh" Icon="refresh" @onmouseup="@Refresh"></RadzenMenuItem>
    </RadzenMenu>
2 Likes
16

Work fine for me, like this


            <RadzenMenuItem Text="+Opções">
                <RadzenMenuItem Text="Incluir"  Icon="input">
                    <Template>
                        <a href="#" @onclick="Incluir" @onclick:preventDefault>Incuir</a>
                    </Template>
                </RadzenMenuItem>
                <RadzenMenuItem Text="Home" Path="/" Icon="home"></RadzenMenuItem>
            </RadzenMenuItem>