Search results

Change Menu Item Dynamically

The items visible in the ContextMenu can be changed dynamically based on the target. To achieve this behavior, initialize ContextMenu with all items using Items property and then you can Hide/Show items using HideItems/ShowItems method in OnOpen event.

@using Syncfusion.EJ2.Blazor.Navigations

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<EjsContextMenu Target="#target" Items="MenuItems" @ref="ContextMenuObj">
    <ContextMenuEvents OnOpen="Open"></ContextMenuEvents>
</EjsContextMenu>

@code {
    EjsContextMenu ContextMenuObj;
    public List<MenuItem> MenuItems = new List<MenuItem>
    {
        new MenuItem{ Text = "Cut" },
        new MenuItem{ Text = "Copy" },
        new MenuItem{ Text = "Paste" },
        new MenuItem{ Text = "Add" },
        new MenuItem{ Text = "Edit" },
        new MenuItem{ Text = "Delete" }
    };

    public void Open(BeforeOpenCloseMenuEventArgs args)
    {
        this.MenuObj.HideItems(new string[] { "Cut", "Copy", "Paste" });
    }
}

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

Output be like

ContextMenu Sample