Migration from Essential JS 1

17 Feb 202213 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= “file_id”
});
menuItems.Add(new
{
  text = “Edit”,
id= “edit_id”,
  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= “view_id”, url= “#”
});
menuItems.Add(new
{
  text = “Help”, id= “help_id”
});
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”).ej2_instances[0];
menu.enableItems(“file_id”, 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”).ej2_instances[0];
menu.enableItems(“file_id”, 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([“#help_id”,”#edit_id”]);		 Method: hideItems

@Html.EJS().Menu("menu").Items(ViewBag.menuItems).Render()
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.hideItems([“edit_id”,”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”).ej2_instances[0];
menu.insertAfter([{ id: “view_id”, 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”).ej2_instances[0];
menu.insertBefore([{ id: “view_id”, 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