This article describes the API migration process of Menu component from Essential JS 1 to Essential JS 2.
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 |
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(); |
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 |