Search results

Open a dialog on Context Menu item click in Blazor ContextMenu component

This section explains about how to open a dialog on Context Menu item click. This can be achieved by handling dialog open in ItemSelected event of the Context Menu.

In the following sample, Dialog will open while clicking Save As... item.

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

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<SfContextMenu Target="#target" Items="@MenuItems">
    <ContextMenuEvents TValue="MenuItem" ItemSelected="select"></ContextMenuEvents>
<SfDialog Content="@Value" Visible="false" Target="#target" Width="200px" Height="110px" @ref="DialogObj">
        <DialogButton OnClick="@clicked">
            <DialogButtonModel Content="SUBMIT" IsPrimary="true"></DialogButtonModel>

@code {
    SfDialog DialogObj;
    public string Value = "This file can be saved as PDF";
    public List<MenuItem> MenuItems = new List<MenuItem>
        new MenuItem{ Text = "Back" },
        new MenuItem{ Text = "Forward" },
        new MenuItem{ Text = "Reload" },
        new MenuItem{ Separator = true },
        new MenuItem{ Text = "Save As..." },
        new MenuItem{ Text = "Print"},
        new MenuItem{ Text = "Cast"}

    private void clicked(object args)

    private void select(MenuEventArgs<MenuItem> args)
        if (args.Item.Text == "Save As...")

        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;

Output be like Context Menu Sample