Change sub menu position

21 Dec 20224 minutes to read

The submenu position can be changed by using the beforeOpen event. Assign the top and left position where you want to open the submenu to the beforeOpen event arguments args.top and args.left respectively.

In the below sample, the sub menu opens above the parent menu item.

<ejs-menu id="menu" items="ViewBag.menuItems" beforeOpen="onBeforeOpen"></ejs-menu>

<script>
    function onBeforeOpen(args) {
        // Getting parent menu item element offset
        var relativeOffset = ej.base.closest(args.event.target, '.e-menu-item').getBoundingClientRect();
        // Getting sub menu wrapper element using closest method
        var subMenuEle = ej.base.closest(args.element, '.e-menu-wrapper');
        subMenuEle.style.display = 'block';
        args.top = (relativeOffset.top - subMenuEle.getBoundingClientRect().height) + pageYOffset;
        args.left = relativeOffset.left + pageXOffset;
        subMenuEle.style.display = '';
    }
</script>

<style>
    body {
        margin-top: 200px;
        text-align: center;
    }
</style>
public ActionResult Position()
{
    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.menuItems = menuItems;
    return View();
}

NOTE

For custom positioning, set both top and left position in the beforeOpen event.