Migration from Essential JS 1

17 Feb 202214 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

<ej-menu id="menu" animation-type="@AnimationType.Default"></ej-menu> 		Not applicable
Context menu target Property: contextMenuTarget

<ej-menu id="menu" context-menu-target="#target"></ej-menu> 		Not applicable
Container element for submenu’s collision Property: container

<ej-menu id="menu" context-menu-target="#target" container="#target"></ej-menu> 		Not applicable
Menu items Not applicable Property: items

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
Properties of menu items Property: id, text, imageUrl, children and url

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit">
  <e-menu-child-items>
    <e-menu-child-item text="Cut"></e-menu-child-item>
    <e-menu-child-item text="Copy"></e-menu-child-item>
    <e-menu-child-item text="Paste"></e-menu-child-item>
  </e-menu-child-items>
</e-menu-item>
  <e-menu-item id="view_id" text="View" url= "#"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu> 		Property: id, text, items, iconCss and url

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
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

<ej-menu id="menu" css-class="custom-class"></ej-menu> 		Property: cssClass

<ejs-menu id="menu" cssClass="custom-class" items="ViewBag.menuItems"></ejs-menu>
Enables or disables the animation on hover or click on the menu items Property: enableAnimation

<ej-menu id="menu" enable-animation="true"></ej-menu> 		Not applicable
Animation settings Not applicable Property: animationSettings

<ejs-menu id="menu" animationSettings="ViewBag.animation" items="ViewBag.menuItems"></ejs-menu>
Root menu items to be aligned center in horizontal menu Property: enableCenterAlign

<ej-menu id="menu" enable-center-align="true"></ej-menu> 		Not applicable
Disabled state Property: enabled

<ej-menu id="menu" enabled="false"></ej-menu> 		Property: disabled

<ejs-menu id="menu" disabled="true" items="ViewBag.menuItems"></ejs-menu>
RTL Property: enableRTL

<ej-menu id="menu" enable-rtl="true"></ej-menu> 		Property: enableRtl

<ejs-menu id="menu" disabled="true" items="ViewBag.menuItems" enableRtl="true"></ejs-menu>
Enables/Disables the separator Property: enableSeparator

<ej-menu id="menu" enable-separator="false"></ej-menu> 		Not applicable
Menu Type Property: menuType

<ej-menu id="menu" menu-type="@MenuType.ContextMenu"></ej-menu> 		Not applicable
Exclude target for context menu Property: excludeTarget

<ej-menu id="menu" menu-type="@MenuType.ContextMenu" context-menu-target="#target" exclude-target=".inner"></ej-menu> 		Not applicable
Fields Property: fields

<ej-menu id="menu">
  <e-menu-fields dataSource="ViewBag.data" id="pid" text="text" parent-id="parent"></e-menu-fields>
</ej-menu> 		Property: fields

<ejs-menu id="menu" disabled="true" items="ViewBag.menuItems" fields="ViewBag.menuFields"></ejs-menu>
Height Property: height

<ej-menu id="menu" height="25px"></ej-menu> 		Not applicable
Width Property: width

<ej-menu id="menu" width="800px"></ej-menu> 		Not applicable
HTML Attributes Property: htmlAttributes

<ej-menu id="menu" html-attribute=""></ej-menu> 		Not applicable
Responsive Property: isResponsive

<ej-menu id="menu" is-responsive="true"></ej-menu> 		Not applicable
Show item on click Property: openOnClick

<ej-menu id="menu" open-on-click="true"></ej-menu> 		Property: showItemOnClick

<ejs-menu id="menu" showItemOnClick="true" items="ViewBag.menuItems"></ejs-menu>
Orientation Property: orientation

<ej-menu id="menu" orientation="@Orientation.Vertical"></ej-menu> 		Property: orientation

<ejs-menu id="menu" orientation="Vertical" items="ViewBag.menuItems"></ejs-menu>
Show root level arrows Property: showRootLevelArrows

<ej-menu id="menu" show-root-level-arrows="false"></ej-menu> 		Not applicable
Show sub level arrows Property: showSubLevelArrows

<ej-menu id="menu" show-sub-level-arrows="false"></ej-menu> 		Not applicable
Sub menu direction Property: subMenuDirection

<ej-menu id="menu" sub-menu-direction="@Direction.Left"></ej-menu> 		Not applicable
Title Property: titleText

<ej-menu id="menu" title-text="Title of the Menu"></ej-menu> 		Not applicable
Template Not applicable Property: template

<ejs-menu id="menu" items="ViewBag.data" fields="ViewBag.menuFields" template="#menuTemplate"></ejs-menu>
Pop up menu height Property: overflowHeight

<ej-menu id="menu" overflow-height="200px"></ej-menu> 		Not applicable

Methods

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

<ej-menu id="menu"></ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.disable();		 Not applicable
Disable menu items Method: disableItem

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item text="File"></e-menu-item>
  <e-menu-item text="Edit"></e-menu-item>
  <e-menu-item text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItem(“File”);		 Method: enableItems

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“File”, false)
Disable menu items by ID Method: disableItemByID

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItemByID(“file_id”);		 Method: enableItems

l<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“file_id”, false, true)
Enable Method Method: enable

<ej-menu id="menu"></ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.enable();		 Not applicable
Enable menu items Method: enableItem

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item text="File"></e-menu-item>
  <e-menu-item text="Edit"></e-menu-item>
  <e-menu-item text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItem(“File”);		 Method: enableItems

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“File”, true);
Enable menu items by ID Method: enableItemByID

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItemByID(“file_id”);		 Method: enableItems

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.enableItems(“file_id”, true, true);
Hide Method Method: hide

<ej-menu id="menu"></ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.hide();		 Not applicable
Hide menu items Method: hideItems

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.hideItems([“#help_id”,”#edit_id”]);		 Method: hideItems

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.hideItems([“edit_id”,”help_id”], true);
Insert menu items Method: insert

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
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

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.insertAfter([{ id: “view_id”, text: “View” }], “#edit_id”);		 Method: insertAfter

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
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

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.insertBefore([{ id: “view_id”, text: “View” }], “#help_id”);		 Method: insertBefore

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.insertBefore([{ id: “view_id”, text: “View” }], “Help”);
Remove menu items Method: remove

<ej-menu id="menu">
<e-menu-items>
  <e-menu-item id="file_id" text="File"></e-menu-item>
  <e-menu-item id="edit_id" text="Edit"></e-menu-item>
  <e-menu-item id="help_id" text="Help"></e-menu-item>
</e-menu-items>
</ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.remove([“#Edit”]);		 Method: removeItems

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
var menu = document.getElementById(“menu”).ej2_instances[0];
menu.removeItems([“Edit”]);
To show menu Method: show

<ej-menu id="menu"></ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.show();		 Not applicable
Destroy method Method: destroy

<ej-menu id="menu"></ej-menu>
var menu = $(“#menu”).data(“ejMenu”);
menu.destroy();		 Method: destroy

<ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu>
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

<ej-menu id="menu" before-open="beforeOpen"></ej-menu>
function beforeOpen(args) {
    /** code block */
}		 Events: beforeOpen

<ejs-menu id="menu" items="ViewBag.menuItems" beforeOpen="beforeOpen"></ejs-menu>
function beforeOpen(args) {
    /** code block */
}
Triggers before closing the menu Not applicable Events: beforeClose

<ejs-menu id="menu" items="ViewBag.menuItems" beforeClose="beforeClose"></ejs-menu>
function beforeClose(args) {
    /** code block */
}
Triggers before rendering each menu item Not applicable Events: beforeItemRender

<ejs-menu id="menu" items="ViewBag.menuItems" beforeItemRender="beforeItemRender"></ejs-menu>
function beforeItemRender(args) {
    /** code block */
}
Triggers while selecting the menu item Events: click

<ej-menu id="menu" click="click"></ej-menu>
function click(args) {
    /** code block */
}		 Events: select

<ejs-menu id="menu" items="ViewBag.menuItems" select="select"></ejs-menu>
function select(args) {
    /** code block */
}
Triggers after closing the menu Events: close

<ej-menu id="menu" close="close"></ej-menu>
function close(args) {
    /** code block */
}		 Events: onClose

<ejs-menu id="menu" items="ViewBag.menuItems" onClose="onClose"></ejs-menu>
function onClose(args) {
    /** code block */
}
Triggers after opening the menu Events: open

<ej-menu id="menu" open="open"></ej-menu>
function open(args) {
    /** code block */
}		 Events: onOpen

<ejs-menu id="menu" items="ViewBag.menuItems" onOpen="onOpen"></ejs-menu>
function onOpen(args) {
    /** code block */
}
Triggers once the component rendering is completed Events: create

<ej-menu id="menu" create="create"></ej-menu>
function create(args) {
    /** code block */
}		 Events: created

<ejs-menu id="menu" items="ViewBag.menuItems" created="created"></ejs-menu>
function created() {
    /** code block */
}
Triggers once the component is destroyed Events: destroy

<ej-menu id="menu" destroy="destroy"></ej-menu>
function destroy(args) {
    /** code block */
}		 Not applicable
Triggers when key down on menu items Events: keydown

<ej-menu id="menu" keydown="keydown"></ej-menu>
function keydown(args) {
    /** code block */
}		 Not applicable
Triggers when mouse out from menu items Events: mouseout

<ej-menu id="menu" mouseout="mouseout"></ej-menu>
function mouseout(args) {
    /** code block */
}		 Not applicable
Triggers when mouse over the Menu items Events: mouseover

<ej-menu id="menu" mouseover="mouseover"></ej-menu>
function mouseover(args) {
    /** code block */
}		 Not applicable
Triggers when overflow popup menu opens Events: overflowOpen

<ej-menu id="menu" overflow-open="overflowOpen"></ej-menu>
function overflowOpen(args) {
    /** code block */
}		 Not applicable
Triggers when overflow popup menu closes Events: overflowClose

<ej-menu id="menu" overflow-close="overflowClose"></ej-menu>
function overflowClose(args) {
    /** code block */
}		 Not applicable