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 <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= “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 <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 |
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”).ej2instances[0]; menu.enableItems(“fileid”, 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”).ej2instances[0]; menu.enableItems(“fileid”, 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([“#helpid”,“#editid”]); |
Method: hideItems <ejs-menu id="menu" items="ViewBag.menuItems"></ejs-menu> var menu = document.getElementById(“menu”).ej2instances[0]; menu.hideItems([“editid”,“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”).ej2instances[0]; menu.insertAfter([{ id: “viewid”, 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”).ej2instances[0]; menu.insertBefore([{ id: “viewid”, 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(); |
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 |