Search results

How To

Change orientation

Orientation in menu items can be changed horizontally or vertically using the orientation property. By default, it is horizontally aligned.

razor
Orientation.cs
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Orientation(ViewBag.orientation).Render()

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
using Syncfusion.EJ2.Navigations;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace EssentialJS2MvcApplication2.Controllers
{
    public class OrientationController : Controller
    {
        // GET: Orientation
        public ActionResult Orientation()
        {
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "File",
                items = new List<object>()
                    {
                        new { text = "Open" },
                        new { text = "Save" },
                        new { text = "Exit" }
                    }
            });
            menuItems.Add(new
            {
                text = "Edit",
                items = new List<object>()
                    {
                        new { text = "Cut" },
                        new { text = "Copy" },
                        new { text = "Paste" }
                    }
            });
            menuItems.Add(new
            {
                text = "View",
                items = new List<object>()
                    {
                        new { text = "Toolbar" },
                        new { text = "Sidebar" },
                        new { text = "Fullscreen" }
                    }
            });
            menuItems.Add(new
            {
                text = "Tools",
                items = new List<object>()
                    {
                        new { text = "Spelling & Grammar" },
                        new { text = "Customize" },
                        new { text = "Options" }
                    }
            });
            menuItems.Add(new
            {
                text = "Help"
            });

            ViewBag.orientation = Syncfusion.EJ2.Navigations.Orientation.Vertical;
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}

Customize menu using events

The Menu provides a set of events to enable users to customize it.

razor
HandleEvents.cs
<div id='container'>
    <div class="control-section">
        <div class="menu-section">
            <ul id="menu"></ul>
        </div>
        <div class="property-section">
            <table id="propertyTable" title="Event trace">
                <tbody>
                <th>Event trace:-</th>
                <tr>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<style>
    html, body, .control-section {
        height: 95%;
    }

    .menu-section {
        margin-top: 100px;
        text-align: center;
        float: left;
    }

    .property-section {
        overflow: auto;
        width: 40%;
        height: 330px;
        float: right;
        font-family: monospace;
    }

    .property-section th {
         text-align: left;
    }

    #clear {
        float: right;
        clear: both;
    }
</style>
<script>
    function updateEventLog(args) {
        var propertyElem = document.getElementById('propertyTable');
        propertyElem.getElementsByTagName('td')[0].insertAdjacentHTML('beforeend', args.name + ' Event triggered. <br />');
    }
</script>
@section Scripts {
    <script>
        document.getElementById("clear").addEventListener('click', function () {
            var clearBtn = document.getElementById("clear").ej2_instances[0];
            var propertyElem = document.getElementById('propertyTable');
            propertyElem.getElementsByTagName('td')[0].innerHTML = '';
        });
    </script>
}
@Html.EJS().Button("clear").Content("Clear").Render()
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeOpen("updateEventLog").BeforeClose("updateEventLog").OnClose("updateEventLog").OnOpen("updateEventLog").Select("updateEventLog").Render()
// GET: HandleEvents
public ActionResult HandleEvents()
{
    List<object> menuItems = 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.menuItems = menuItems;
    return View();
}

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
<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>

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

<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
<div id='container'>
    <div class="control-section">
        <div class="menu-section">
            <ul id="menu"></ul>
        </div>
    </div>
</div>
<style>
    .menu-section {
        margin-top: 100px;
        text-align: center;
    }
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
<script>
    var disableItems = ['Conferences', 'Music', 'Directory'];
    function beforeOpen(args) {
        menuObj = document.getElementById("menu").ej2_instances[0];
        //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 = document.getElementById("menu").ej2_instances[0];
        //Disable items
        menuObj.enableItems(disableItems, false, false);
    }
    function btnCreated(args) {
        buttonObj = document.getElementById("enableAll").ej2_instances[0];
        buttonObj.element.onclick = () => {
            //Enable items
            menuObj.enableItems(disableItems, true, false);
            disableItems = [];
        }
    }
   
</script>

@Html.EJS().Button("enableAll").Content("Enable all items").Created("btnCreated").Render()
@Html.EJS().Menu("menu").Items(ViewBag.data).Created("created").BeforeOpen("beforeOpen").Render()
// 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
<div id='container'>
    <div class="control-section">
        <div class="menu-section">
            <ul id="menu"></ul>
        </div>
    </div>
</div>
<style>
    .menu-section {
        margin-top: 100px;
        text-align: center;
    }
    body {
        margin-top: 100px;
        text-align: center;
    }
</style>
<script>
    var hiddenItems = ['Workshops', 'Music', 'Movies'];
    function beforeOpen(args) {
        menuObj = document.getElementById("menu").ej2_instances[0];
        //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 = document.getElementById("menu").ej2_instances[0];
        menuObj.hideItems(hiddenItems, false);
    }
    function btnCreated(args) {
        buttonObj = document.getElementById("showAll").ej2_instances[0];
        buttonObj.element.onclick = () => {
            menuObj.showItems(hiddenItems, false);
            hiddenItems = [];
        }
    }

</script>
@Html.EJS().Button("showAll").Content("Show All items").Created("btnCreated").Render()
@Html.EJS().Menu("menu").Items(ViewBag.data).Created("created").BeforeOpen("beforeOpen").Render()
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.

Create mnemonic UI in menuitem

A particular character in a text can be underlined in the beforeItemRender event by adding <u> tag in between the text and assign the innerHTML to the li element.

In the following example, the first character in File, Open, and Save menu items are underlined.

In the below example, File, Open and Save items are underlined with first character in menu items.

razor
Underline.cs
<script>
    function beforeItemRender(args) {
        if (['File', 'Open', 'Save'].indexOf(args.item.text) > -1) {
            // To underline a First character.
            var underlinedText = '<u>' + args.item.text.slice(0, 1) + '</u>' + args.item.text.slice(1);
            args.element.innerHTML = args.element.innerHTML.replace(args.item.text, underlinedText);
        }
    }
</script>

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }
     /**
    * ej2 Menu styles
    */
    @@font-face {
        font-family: 'e-menu';
        src:
        url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .em-icons {
        font-family: 'e-menu';
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        line-height: 1;
        text-transform: none;
    }
    
    .e-file::before {
        content: '\e886';
    }
    
    .e-edit::before {
        content: '\e822';
    }

    .e-cut::before {
        content: '\e5a9';
    }

    .e-copy::before {
        content: '\e5b3';
    }

    .e-paste::before {
        content: '\e5b2';
    }

    .e-open::before {
        content: '\e885';
    }

    .e-save::before {
        content: '\e98e';
    }
</style>

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeItemRender("beforeItemRender").Render()
// Underline
public ActionResult Underline()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "File",
        iconCss = "em-icons e-file",
        items = new List<object>()
                {
                    new { text = "Open", iconCss= "em-icons e-open" },
                    new { text = "Save", iconCss= "e-icons e-save" },
                    new { separator = true},
                    new { text = "Exit" }
                }
    });
    menuItems.Add(new
    {
        text = "Edit",
        iconCss = "em-icons e-edit",
        items = new List<object>()
                {
                    new { text = "Cut", iconCss= "em-icons e-cut" },
                    new { text = "Copy", iconCss= "em-icons e-copy" },
                    new { text = "Paste", iconCss= "em-icons e-paste" }
                }
    });
    menuItems.Add(new
    {
        text = "Format",
    });
    menuItems.Add(new
    {
        text = "View"
    });
    menuItems.Add(new
    {
        text = "Bookmarks"
    });
    menuItems.Add(new
    {
        text = "Tools"
    });
    menuItems.Add(new
    {
        separator = true    
    });
    menuItems.Add(new
    {
        text = "Help"
    });

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