How to bind Context Menu events in Blazor

14 Aug 20262 minutes to read

To bind a menu event in the ContextMenu, the ItemSelected event is used and is triggered when an item in the ContextMenu is selected.

The following table lists the events exposed by MenuEvents.

Event	Description
ItemSelected	Triggered when a ContextMenu item is selected.
OnOpen	Triggered before the ContextMenu opens (root and sub menus).
Opened	Triggered after the ContextMenu is fully opened.
OnClose	Triggered before the ContextMenu closes.
Closed	Triggered after the ContextMenu is fully closed.

The handler receives a MenuEventArgs object that exposes properties such as Item, Event, Name, and ParentItem.

@using Syncfusion.Blazor.Navigations

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<SfContextMenu Target="#target" TValue="MenuItem">
    <MenuItems>
        <MenuItem Text="Cut"></MenuItem>
        <MenuItem Text="Copy"></MenuItem>
        <MenuItem Text="Paste"></MenuItem>
    </MenuItems>
    <MenuEvents TValue="MenuItem" ItemSelected="@selectedHandler"></MenuEvents>
</SfContextMenu>

@code {
    public MenuItem SelectedItem;
    // Triggers when the item is selected
    private void selectedHandler(MenuEventArgs<MenuItem> args) {
        SelectedItem = args.Item;
    }
}

<style>
    #target {
        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;
    }
</style>