Search results

Customizing Items and Multilevel Nesting

Customizing Menu Items

The ContextMenu items can be customized by using the OnItemRender event. In the following sample, the menu items is customized by adding new styles.

@using Syncfusion.EJ2.Blazor.Navigations

<div id="target">Right click/Touch hold to open the ContextMenu </div>
<EjsContextMenu Target="#target" Items="@MenuItems">
    <ContextMenuEvents OnItemRender="Render"></ContextMenuEvents>
</EjsContextMenu>

@code {
    public List<MenuItem> MenuItems = new List<MenuItem>
    {
        new MenuItem{ Text = "Cut" },
        new MenuItem{ Text = "Copy" },
        new MenuItem{ Text = "Paste" }
    };

    public void Render(MenuEventArgs args)
    {
        args.Element.AddClass(new string[] { "custom" });
    }
}

<style>
    #target {
        border: 1px dashed;
        height: 150px;
        padding: 10px;
        position: relative;
        text-align: justify;
        color: gray;
        user-select: none;
    }
    .custom{
        float: left;
        font-size: 10px;
        padding-left: 50px;
        font-style: oblique;
    }
</style>

Output be like

ContextMenu Sample

Multilevel nesting

The Multiple level nesting supports in ContextMenu. It can be achieved by mapping the Items property inside the parent MenuItem. In the below sample, three level nesting of ContextMenu is provided.

@using Syncfusion.EJ2.Blazor.Navigations

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

@code {
public List<MenuItem> MenuItems = new List<MenuItem>
{
    new MenuItem { Text = "Show All Bookmarks" },
    new MenuItem { Text = "Bookmarks Toolbar", Items = new List<MenuItem>{
    new MenuItem { Text = "Most Visited", Items = new List<MenuItem>{
    new MenuItem { Text = "Google"},
    new MenuItem { Text = "Gmail"} }
    } } },
    new MenuItem { Text = "Recently Added" }
    };
}

<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