Search results

Customize menu items

Add or remove menu items

Menu items can be added or removed using the insertAfter, insertBefore and removeItems methods.

In the following example, the Europe menu items are added before the Oceania item, the Africa menu items are added after the Asia, and the South America and Mexico items are removed from menu.

razor
CustomizeMenuItems.cs
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields(ViewBag.menuFields).Created("created").Render()

<script>
        function created(args) {
            var insertBefore = [
                {
                    continent: 'Europe',
                    countries: [
                        { country: 'Finland' },
                        { country: 'Austria' }
                    ]
                }
            ];
            var insertItem = [
                {
                    continent: 'Africa',
                    countries: [
                        { country: 'Nigeria' }
                    ]
                }
            ];

            menuObj = document.getElementById("menu").ej2_instances[0];

            // Add items before to 'Oceania'
            menuObj.insertBefore(insertBefore, "Oceania", false);

            // Add items after to 'Asia'
            menuObj.insertAfter(insertItem, "Asia", false);

            // Remove items
            menuObj.removeItems(['South America', 'Mexico'], false);
        }
</script>

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
// Customize Menu Items
public ActionResult CustomizeMenuItems()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        continent = "Asia",
        countries = new List<object>()
        {
            new { country = "China" },
            new { country = "India" },
            new { country = "Japan" }
         },
    });
    menuItems.Add(new
    {
        continent = "North America",
        countries = new List<object>()
         {
            new { country = "Canada" },
            new { country = "Mexico" },
            new { country = "USA" }
        },
    });
    menuItems.Add(new
    {
        continent = "South America",
        countries = new List<object>()
        {
            new { country = "Brazil" },
            new { country = "Colombia" },
            new { country = "Argentina" }
        },
    });
    menuItems.Add(new
    {
        continent = "Oceania",
        countries = new List<object>()
        {
            new { country = "Australia" },
            new { country = "New Zealand" },
            new { country = "Samoa" }
        },
    });
    menuItems.Add(new { continent = "Antarctica" });

    MenuFieldSettings menuFields = new MenuFieldSettings()
    {
        Text = new string[] { "continent", "country" },
        Children = new string[] { "countries" }
    };

    ViewBag.menuItems = menuItems;
    ViewBag.menuFields = menuFields;
    return View();
}

To process items with ID values, set isUnique to true.

Enable or disable menu items

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

In the following example, the Directory header item, Conferences, and Music sub menu items are disabled.

razor
EnableDisable.cs
@Html.EJS().Button("enableAll").Content("Enable all items").Created("btnCreated").Render()
<div class="menu-section">
    @Html.EJS().Menu("menu").Items(ViewBag.data).Created("created").BeforeOpen("beforeOpen").Render()
</div>

<style>
    .menu-section {
        margin-top: 100px;
        text-align: center;
    }
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
<script>
    var disableItems = ['Conferences', 'Music', 'Directory'], menuObj;
    function beforeOpen(args) {
        menuObj = ej.base.getComponent(document.getElementById("menu"), "menu");
        //Handling sub menu items
        for (var i = 0; i < args.items.length; i++) {
            if (disableItems.indexOf(args.items[i].text) > -1) {
                menuObj.enableItems([args.items[i].text], false, false);
            }
        }
    }
    function created(args) {
        menuObj = ej.base.getComponent(document.getElementById("menu"), "menu");
        //Disable items
        menuObj.enableItems(disableItems, false, false);
    }
    function btnCreated(args) {
        var buttonObj = ej.base.getInstance(document.getElementById("showAll"), ej.buttons.Button);
        buttonObj.element.onclick = () => {
            //Enable items
            menuObj.enableItems(disableItems, true, false);
            disableItems = [];
        }
    }
   
</script>
// Enable and Disable Menu Items
public ActionResult EnableDisable()
{
    List<object> data = new List<object>() {
                new {
                    text = "Events",
                    items = new List<object>() {
                        new { text= "Conferences" },
                        new { text= "Music" },
                        new { text= "Workshops" }
                    }
                },
                new {
                    text = "Movies",
                    items = new List<object>() {
                        new { text= "Now Showing" },
                        new { text= "Coming Soon" }
                    }
                },
                new {
                    text = "Directory",
                    items = new List<object>() {
                        new { text= "Media Gallery" },
                        new { text= "Newsletters" }
                    }
                },
                new {
                    text = "Queries",
                    items = new List<object>() {
                        new { text= "Our Policy" },
                        new { text= "Site Map"},
                        new { text= "24x7 Support"}
                    }
                },
                new { text= "Services" }
            };

    ViewBag.data = data;
    return View();
}

To disable sub menu items, use the beforeOpen event.

Hide or show menu items

You can show or hide the menu items using the showItems and hideItems methods.

In the following example, the Movies header item, Workshops, and Music sub menu items are hidden in menu.

razor
HideShow.cs
@Html.EJS().Button("showAll").Content("Show All items").Created("btnCreated").Render()
<div class="menu-section">
    @Html.EJS().Menu("menu").Items(ViewBag.data).Created("created").BeforeOpen("beforeOpen").Render()
</div>
<style>
    .menu-section {
        margin-top: 100px;
        text-align: center;
    }
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
<script>
    var hiddenItems = ['Workshops', 'Music', 'Movies'], menuObj;
    function beforeOpen(args) {
        menuObj = ej.base.getComponent(document.getElementById("menu"), "menu");
        //Handling sub menu items
        for (var i = 0; i < args.items.length; i++) {
            if (hiddenItems.indexOf(args.items[i].text) > -1) {
                menuObj.hideItems([args.items[i].text], false);
            }
        }
    }
    function created(args) {
        menuObj = ej.base.getComponent(document.getElementById("menu"), "menu");
        menuObj.hideItems(hiddenItems, false);
    }
    function btnCreated(args) {
        var buttonObj = ej.base.getInstance(document.getElementById("showAll"), ej.buttons.Button);
        buttonObj.element.onclick = () => {
            menuObj.showItems(hiddenItems, false);
            hiddenItems = [];
        }
    }

</script>
public ActionResult ShowHide()
{
    List<object> data = new List<object>() {
                new {
                    text = "Events",
                    items = new List<object>() {
                        new { text= "Conferences" },
                        new { text= "Music" },
                        new { text= "Workshops" }
                    }
                },
                new {
                    text = "Movies",
                    items = new List<object>() {
                        new { text= "Now Showing" },
                        new { text= "Coming Soon" }
                    }
                },
                new {
                    text = "Directory",
                    items = new List<object>() {
                        new { text= "Media Gallery" },
                        new { text= "Newsletters" }
                    }
                },
                new {
                    text = "Queries",
                    items = new List<object>() {
                        new { text= "Our Policy" },
                        new { text= "Site Map"},
                        new { text= "24x7 Support"}
                    }
                },
                new { text= "Services" }
            };

    ViewBag.data = data;
    return View();
}

Using the beforeOpen event, you can hide the sub menu items as in the above example since the menu supports to hide items only for headers initially.