ContextMenu (Blazor)
This article demonstrates how to use the ContextMenu component. Check also the component guide and API reference.
- Register
<RadzenContextMenu />in your application main layout.
- Register
ContextMenuServicein your application Startup or Program.
- Inject
ContextMenuServicein your page.
- Execute
Open()method of theContextMenuService.
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)
{
//
}
}