ContextMenu

This guide demonstrates how to use the ContextMenu component.

  1. Register <RadzenContextMenu /> in your application main layout.
  2. Register ContextMenuService in your application Startup or Program.
  3. Inject ContextMenuService in your page.
  4. Execute Open() method of the ContextMenuService.

Blazor declaration

@inject ContextMenuService contextMenuService
...
<RadzenButton Text="Show context menu with items for Radzen component" ContextMenu="@(args => ShowContextMenuWithItems(args))" />
<RadzenButton Text="Show context menu with custom content for Radzen component" ContextMenu="@(args => ShowContextMenuWithContent(args) )" />
<button @oncontextmenu="@(args => ShowContextMenuWithContent(args))" @oncontextmenu:preventDefault="true">
    Show context menu with custom content for HTML element
</button>

@code {
    void ShowContextMenuWithItems(MouseEventArgs args)
    {
        contextMenuService.Open(args,
            new List<ContextMenuItem>() {
                new ContextMenuItem(){ Text = "Context menu item 1", Value = 1 },
                new ContextMenuItem(){ Text = "Context menu item 2", Value = 2 },
                new ContextMenuItem(){ Text = "Context menu item 3", Value = 3 },
         }, OnMenuItemClick);
    }

    void ShowContextMenuWithContent(MouseEventArgs args) => contextMenuService.Open(args, ds =>
        @<RadzenMenu Click="OnMenuItemClick">
            <RadzenMenuItem Text="Item1" Value="1"></RadzenMenuItem>
            <RadzenMenuItem Text="Item2" Value="2"></RadzenMenuItem>
            <RadzenMenuItem Text="More items" Value="3">
                <RadzenMenuItem Text="More sub items" Value="4">
                    <RadzenMenuItem Text="Item1" Value="5"></RadzenMenuItem>
                    <RadzenMenuItem Text="Item2" Value="6"></RadzenMenuItem>
                </RadzenMenuItem>
            </RadzenMenuItem>
            </RadzenMenu>
        );

    void OnMenuItemClick(MenuItemEventArgs args)
    {
        //
    }
}

We are here for you

Making our users happy is always a priority for us.