Open and close Context Menu in Blazor ContextMenu Component

24 Aug 20211 minute to read

Open and close the Context Menu manually whenever required by using the Open and Close methods. In the following sample, the Context Menu manually opens while clicking the button using Open method with ClientX and ClientY coordinates.

To manually close the Context Menu, Close method can be used.

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Buttons

<div id="target">
    <SfContextMenu @ref="contextMenuObj" TValue="MenuItem">
        <MenuItems>
            <MenuItem Text="Cut"></MenuItem>
            <MenuItem Text="Copy"></MenuItem>
            <MenuItem Text="Paste"></MenuItem>
        </MenuItems>
    </SfContextMenu>
    <SfButton @onclick="OpenContextMenu">Open ContextMenu</SfButton>
</div>

@code {
    SfContextMenu<MenuItem> contextMenuObj;
    private void OpenContextMenu(MouseEventArgs e)
    {
        contextMenuObj.Open(e.ClientX, e.ClientY);
    }
}

Output will be as follows

Blazor ContextMenu displays Dialog Menu