ASP.NET MVC
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Migration from Essential JS 1 in ASP.NET MVC Menu Bar control

03 Aug 2021 / 8 minutes to read

This article describes the API migration process of Menu component from Essential JS 1 to Essential JS 2.

Properties

Behavior API in Essential JS 1 API in Essential JS 2
Animation type on hover or click on the menu items Property: animationType

@Html.EJ().Menu("menu").AnimationType(AnimationType.Default)		 Not applicable
Context menu target Property: contextMenuTarget

@Html.EJ().Menu("menu").ContextMenuTarget("#target")		 Not applicable
Container element for submenu’s collision Property: container

@Html.EJ().Menu("menu").ContextMenuTarget("#target").Container("#target")		 Not applicable
Menu items Not applicable Property: items

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
Properties of menu items Property: id, text, imageUrl, children and url

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit").Children(child =>
  {
    child.Add().Text("Cut");
    child.Add().Text("Copy");
    child.Add().Text("Paste");
  });
  items.Add().Id("view_id").Text("View").Url("#");
  items.Add().Id("help_id").Text("Help");
})		 Property: id, text, items, iconCss and url

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
List<object> menuItems = new List<object>();
menuItems.Add(new
{
  text = “File”, id= “fileid”
});
menuItems.Add(new
{
  text = “Edit”,
id= “editid”,
  items = new List<object>()
  {
    new { text= “Cut”, iconCss= “e-icons e-cut” },
    new { text= “Copy”, iconCss= “e-icons e-copy” },
    new { text= “Paste”, iconCss= “e-icons e-paste” }
  }
});
menuItems.Add(new
{
  text = “view”, id= “viewid”, url= ”#”
});
menuItems.Add(new
{
  text = “Help”, id= “helpid”
});
ViewBag.menuItems = menuItems;
Adding custom class Property: cssClass

@Html.EJ().Menu("menu").CssClass("custom-class")		 Property: cssClass

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).CssClass("custom-class").Render()
Enables or disables the animation on hover or click on the menu items Property: enableAnimation

@Html.EJ().Menu("menu").EnableAnimation(true)		 Not applicable
Animation settings Not applicable Property: animationSettings

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).AnimationSettings("ViewBag.animation").Render()
Root menu items to be aligned center in horizontal menu Property: enableCenterAlign

@Html.EJ().Menu("menu").EnableCenterAlign(true)		 Not applicable
Disabled state Property: enabled

@Html.EJ().Menu("menu").Enabled(false)		 Property: disabled

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Disabled(true).Render()
RTL Property: enableRTL

@Html.EJ().Menu("menu").EnableRTL(true)		 Property: enableRtl

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).EnableRtl(true).Render()
Enables/Disables the separator Property: enableSeparator

@Html.EJ().Menu("menu").EnableSeparator(false)		 Not applicable
Menu Type Property: menuType

@Html.EJ().Menu("menu").MenuType(MenuType.ContextMenu)		 Not applicable
Exclude target for context menu Property: excludeTarget

@Html.EJ().Menu("menu").MenuType(MenuType.ContextMenu).ContextMenuTarget("#target").ExcludeTarget(".inner")		 Not applicable
Fields Property: fields

@Html.EJ().Menu("menu").MenuFields(f =>
  f.Datasource((IEnumerable<Check.Controllers.CheckController.MenuJson>)ViewBag.datasource).Id("id").Text("text").ParentId("parent"))		 Property: fields

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Fields("ViewBag.menuFields").Render()
Height Property: height

@Html.EJ().Menu("menu").Height("50")		 Not applicable
Width Property: width

@Html.EJ().Menu("menu").Width("800")		 Not applicable
HTML Attributes Property: htmlAttributes

@Html.EJ().Menu("menu").HtmlAttribute("")		 Not applicable
Responsive Property: isResponsive

@Html.EJ().Menu("menu").IsResponsive(true)		 Not applicable
Show item on click Property: openOnClick

@Html.EJ().Menu("menu").OpenOnClick(true)		 Property: showItemOnClick

@Html.EJS().Menu("menu").ShowItemOnClick(true).Items("ViewBag.menuItems").Render()
Orientation Property: orientation

@Html.EJ().Menu("menu").Orientation(Orientation.Vertical)		 Property: orientation

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Orientation("Vertical").Render()
Show root level arrows Property: showRootLevelArrows

@Html.EJ().Menu("menu").ShowRootLevelArrows(false)		 Not applicable
Show sub level arrows Property: showSubLevelArrows

@Html.EJ().Menu("menu").ShowSubLevelArrows(false)		 Not applicable
Sub menu direction Property: subMenuDirection

@Html.EJ().Menu("menu").SubMenuDirection(Direction.Left)		 Not applicable
Title Property: titleText

@Html.EJ().Menu("menu").TitleText("Title of the Menu")		 Not applicable
Template Not applicable Property: template

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Template("#menuTemplate").Render()
Pop up menu height Property: overflowHeight

@Html.EJ().Menu("menu").OverflowHeight("200")		 Not applicable

Methods

Behavior API in Essential JS 1 API in Essential JS 2
Disable Method Method: disable

@Html.EJ().Menu("menu")
var menu = $(“#menu”).data(“ejMenu”);
menu.disable();		 Not applicable
Disable menu items Method: disableItem

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Text("File");
  items.Add().Text("Edit");
  items.Add().Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItem(“File”);		 Method: enableItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“File”, false)
Disable menu items by ID Method: disableItemByID

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItemByID(“file_id”);		 Method: enableItems

l@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2instances[0];
menu.enableItems(“fileid”, false, true)
Enable Method Method: enable

@Html.EJ().Menu("menu")
var menu = $(“#menu”).data(“ejMenu”);
menu.enable();		 Not applicable
Enable menu items Method: enableItem

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Text("File");
  items.Add().Text("Edit");
  items.Add().Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItem(“File”);		 Method: enableItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“File”, true);
Enable menu items by ID Method: enableItemByID

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItemByID(“file_id”);		 Method: enableItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2instances[0];
menu.enableItems(“fileid”, true, true);
Hide Method Method: hide

@Html.EJ().Menu("menu")
var menu = $(“#menu”).data(“ejMenu”);
menu.hide();		 Not applicable
Hide menu items Method: hideItems

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.hideItems([“#helpid”,“#editid”]);		 Method: hideItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2instances[0];
menu.hideItems([“editid”,“help_id”], true);
Insert menu items Method: insert

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.insert([{ id: “view_id”, text: “View” }], “#edit_id”);		 Not applicable
Insert menu items after the specified menu item Method: insertAfter

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.insertAfter([{ id: “view_id”, text: “View” }], “#edit_id”);		 Method: insertAfter

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2instances[0];
menu.insertAfter([{ id: “viewid”, text: “View” }], “Edit”);
Insert menu items before the specified menu item Method: insertBefore

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.insertBefore([{ id: “view_id”, text: “View” }], “#help_id”);		 Method: insertBefore

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2instances[0];
menu.insertBefore([{ id: “viewid”, text: “View” }], “Help”);
Remove menu items Method: remove

@Html.EJ().Menu("menu").Items(items =>
{
  items.Add().Id("file_id").Text("File");
  items.Add().Id("edit_id").Text("Edit");
  items.Add().Id("help_id").Text("Help");
})
var menu = $(“#menu”).data(“ejMenu”);
menu.remove([“#Edit”]);		 Method: removeItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.removeItems([“Edit”]);
To show menu Method: show

@Html.EJ().Menu("menu")
var menu = $(“#menu”).data(“ejMenu”);
menu.show();		 Not applicable
Destroy method Method: destroy

@Html.EJ().Menu("menu")
var menu = $(“#menu”).data(“ejMenu”);
menu.destroy();		 Method: destroy

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.destroy();

Events

Behavior API in Essential JS 1 API in Essential JS 2
Triggers before opening the menu Events: beforeOpen

@Html.EJ().Menu("menu").BeforeOpen("beforeOpen")
function beforeOpen(args) {
    /** code block */
}		 Events: beforeOpen

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeOpen("beforeOpen").Render()
function beforeOpen(args) {
    /** code block */
}
Triggers before closing the menu Not applicable Events: beforeClose

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeClose("beforeClose").Render()
function beforeClose(args) {
    /** code block */
}
Triggers before rendering each menu item Not applicable Events: beforeItemRender

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).BeforeItemRender("beforeItemRender").Render()
function beforeItemRender(args) {
    /** code block */
}
Triggers while selecting the menu item Events: click

@Html.EJ().Menu("menu").Click("click")
function click(args) {
    /** code block */
}		 Events: select

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Select("select").Render()
function select(args) {
    /** code block */
}
Triggers after closing the menu Events: close

@Html.EJ().Menu("menu").Close("close")
function close(args) {
    /** code block */
}		 Events: onClose

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).OnClose("onClose").Render()
function onClose(args) {
    /** code block */
}
Triggers after opening the menu Events: open

@Html.EJ().Menu("menu").Open("open")
function open(args) {
    /** code block */
}		 Events: onOpen

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).OnOpen("onOpen").Render()
function onOpen(args) {
    /** code block */
}
Triggers once the component rendering is completed Events: create

@Html.EJ().Menu("menu").Create("create")
function create(args) {
    /** code block */
}		 Events: created

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Created("created").Render()
function created() {
    /** code block */
}
Triggers once the component is destroyed Events: destroy

@Html.EJ().Menu("menu").Destroy("destroy")
function destroy(args) {
    /** code block */
}		 Not applicable
Triggers when key down on menu items Events: keydown

@Html.EJ().Menu("menu").Keydown("keydown")
function keydown(args) {
    /** code block */
}		 Not applicable
Triggers when mouse out from menu items Events: mouseout

@Html.EJ().Menu("menu").Mouseout("mouseout")
function mouseout(args) {
    /** code block */
}		 Not applicable
Triggers when mouse over the Menu items Events: mouseover

@Html.EJ().Menu("menu").Mouseover("mouseover")
function mouseover(args) {
    /** code block */
}		 Not applicable
Triggers when overflow popup menu opens Events: overflowOpen

@Html.EJ().Menu("menu").OverflowOpen("overflowOpen")
function overflowOpen(args) {
    /** code block */
}		 Not applicable
Triggers when overflow popup menu closes Events: overflowClose

@Html.EJ().Menu("menu").OverflowClose("overflowClose")
function overflowClose(args) {
    /** code block */
}		 Not applicable
Previous
Next