ContextMenu issues

Radzen.Blazor Components
1

Hello @Team

Besides the Tooltip, the ContextMenu felt as it was missing some functionalities, such as:

  1. Menu closing after click. This might be an edge case but I'm passing the menu as a render fragment to another custom component, while also needing to internally control the click event to close the menu. This means that the render fragment itself wouldn't contain the click event. I wonder if you could implement and expose this method:
public void Open(MouseEventArgs args, RenderFragment<ContextMenuService> childContent, Action<MenuItemEventArgs> click = null);
  1. Side expansion. I have a RadzenFooter with a bunch of status icons and would like to have individual context menus. However, the navigations only expand downwards and the items are impossible to click. I suggest expanding to the sides and creating adjacent submenus.
    ContextMenuSideOpening
2

Hi @kim,

Not sure I understand the first problem - the context menu is closed when you click somewhere outside the menu. If you want to close the menu on menu item click you can execute ContextMenuService.Close();:

image
image1920×1080 265 KB

Unfortunately the second issue is not trivial and we do not have exact date when it will be available as a feature.

3

Let's say I have this custom component:

@inject ContextMenuService ContextMenu
<RadzenIcon ContextMenu=@OpenContextMenu />
@code {
    [Parameter] public RenderFragment<ContextMenuService> Menu { get; set; }
    [Parameter] public EventCallback<MenuItemEventArgs> OnClick { get; set; }
    void OpenContextMenu(MouseEventArgs args)
        => ContextMenu.Open(args, Menu, async (args) => await CloseMenu(args));
    async Task CloseMenu(MenuItemEventArgs args) {
        await OnClick.InvokeAsync(args);
        ContextMenu.Close();
    }
}

My goal with this component is to create an icon pattern that has a context menu with custom content, that closes on click after invoking a custom delegate.

4

You can use the service method, check my previous reply.

5

Your previous reply showcases the demo source code, which is considering the click event to be binded in the passed render fragment. That is not my case, check my first message.

6

The event handler can be attached from Open method as well:

image
image1920×1080 146 KB

7

I'm aware of that. But it's not possible to pass the fragment and the event handler separately, is it?

8

When you pass a fragment you have full control what you are declaring including to define the event:

image
image1920×1080 145 KB

9

This is not an option for me, because the event handler is not passed by the same component that manages the context menu. It is handled internally by the component I've shown before.

10

I'm afraid this is what is supported.

11