Search results

Change Menu Item Dynamically

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

@using Syncfusion.Blazor.Navigations

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

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

    public List<string> HideItems = new List<string>() { "Cut", "Copy", "Paste"};

    public void Open(BeforeOpenCloseMenuEventArgs<ContextMenuItem> args)
    {
        this.ContextMenuObj.HideItems(this.HideItems);
    }
}

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

Output be like

Context Menu Sample