Search results

Enable or disable context menu items

You can enable and disable the menu items using the EnableItems method in ContextMenu. To enable menuItems, set the Enable property in argument to true and vice-versa.

In the following example, the Display Settings in parent items and Medium icons in sub menu items are disabled.

@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 Created="create" OnOpen="open"></ContextMenuEvents>
</EjsContextMenu>

@code {
    EjsContextMenu ContextMenuObj;
    public List<MenuItem> MenuItems = new List<MenuItem>
    {
        new MenuItem{ Text="View", Items= new List<MenuItem>{
            new MenuItem { Text="Large Icons"},
            new MenuItem { Text="Medium Icons"},
            new MenuItem { Text="Small Icons"} } },
        new MenuItem{ Text="Sort By" },
        new MenuItem{ Text="Refresh" },
        new MenuItem{ Separator=true },
        new MenuItem{ Text="New" },
        new MenuItem{ Separator=true},
        new MenuItem{ Text="Display Settings"},
        new MenuItem{ Text="Personalize"}
    };
        public string[] SubMenuItem = new string[] { "Medium Icons" };
        public string[] MenuItem = new string[] { "Display Settings" };
        private void open(Syncfusion.EJ2.Blazor.Navigations.BeforeOpenCloseMenuEventArgs args)
        {
            ContextMenuObj.EnableItems(this.SubMenuItem, false);
        }
        private void create(object obj)
        {
            ContextMenuObj.EnableItems(this.MenuItem, false);
        }
 };

<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

To disable sub menu items, use the OnOpen event.