Ej1 api migration in EJ2 JavaScript Menu control

2 May 202313 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

$(“#menu”).ejMenu({
animationType: ej.AnimationType.Default
});		 Not applicable
Context menu target Property: contextMenuTarget

$(“#menu”).ejMenu({
menuType: ej.MenuType.ContextMenu,
contextMenuTarget: “#target”,
});		 Not applicable
Container element for submenu’s collision Property: container

$(“#menu”).ejMenu({
container: “#target”,
target: “#target”
});		 Not applicable
Menu items Not applicable Property: items
var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
var menuItems = [
  {
    text: ‘File’  
  },
  {
    text: ‘Edit’  
  },
  {
    text: ‘More’
  },
  {
    text: ‘Help’  
  }
]
Adding custom class Property: cssClass

$(“#menu”).ejMenu({
cssClass: “e-custom-class”
});		 Property: cssClass

var menu = new ej.navigations.Menu({
cssClass: “e-custom-class”,
items: menuItems
});
menu.appendTo(“#menu”);
Enables or disables the animation on hover or click on the menu items Property: enableAnimation

$(“#menu”).ejMenu({
enableAnimation: true,
});		 Not applicable
Root menu items to be aligned center in horizontal menu Property: enableCenterAlign

$(“#menu”).ejMenu({
enableCenterAlign: true,
});		 Not applicable
Disabled state Property: enabled

$(“#menu”).ejMenu({
enabled: false
});		 Property: disabled

var menu = new ej.navigations.Menu({
disabled: true,
items: menuItems
});
menu.appendTo(“#menu”);
RTL Property: enableRTL

$(“#menu”).ejMenu({
enableRTL: true
});		 Property: enableRtl

var menu = new ej.navigations.Menu({
enableRtl: true,
items: menuItems
});
menu.appendTo(“#menu”);
Enables/Disables the separator Property: enableSeparator

$(“#menu”).ejMenu({
enableSeparator: true
});		 Not applicable
Exclude target for context menu Property: excludeTarget

$(“#menu”).ejMenu({
excludeTarget: “.exclude-target”,
menuType: ej.MenuType.ContextMenu,
contextMenuTarget: “#target”
});		 Not applicable
Fields Property: fields

$(“#menu”).ejMenu({
fields: menuFields
});		 Property: fields

var menu = new ej.navigations.Menu({
fields: menuFields,
items: menuItems
});
menu.appendTo(“#menu”);
Height Property: height

$(“#menu”).ejMenu({
height: “25”
});		 Not applicable
HTML Attributes Property: htmlAttributes

$(“#menu”).ejMenu({
htmlAttributes: {“aria-label”:”menu”}
});		 Not applicable
Responsive Property: isResponsive

$(“#menu”).ejMenu({
isResponsive: true
});		 Not applicable
Menu Type Property: menuType

$(“#menu”).ejMenu({
menuType: ej.MenuType.ContextMenu,
contextMenuTarget: “#target”
});		 Not applicable
Show item on click Property: openOnClick

$(“#menu”).ejMenu({
openOnClick: true
});		 Property: showItemOnClick

var menu = new ej.navigations.Menu({
showItemOnClick: true,
items: menuItems
});
menu.appendTo(“#menu”);
Orientation Property: orientation

$(“#menu”).ejMenu({
orientation: ej.Orientation.Vertical
});		 Property: orientation

var menu = new ej.navigations.Menu({
orientation: “Vertical”,
items: menuItems
});
menu.appendTo(“#menu”);
Show root level arrows Property: showRootLevelArrows

$(“#menu”).ejMenu({
showRootLevelArrows: false
});		 Not applicable
Show sub level arrows Property: showSubLevelArrows

$(“#menu”).ejMenu({
showSubLevelArrows: false
});		 Not applicable
Sub menu direction Property: subMenuDirection

$(“#menu”).ejMenu({
subMenuDirection: “left”
});		 Not applicable
Title Property: titleText

$(“#menu”).ejMenu({
titleText: “Menu”
});		 Not applicable
Width Property: width

$(“#menu”).ejMenu({
width: “800px”
});		 Not applicable
Animation settings Not applicable Property: animationSettings

let animationSettings: MenuAnimationSettings = { effect: “FadeIn” }
var menu = new ej.navigations.Menu({
animationSettings: animationSettings,
items: menuItems
});
menu.appendTo(“#menu”);
Template Not applicable Property: template

var menu = new ej.navigations.Menu({
items: [{
category: ‘Services’, options: [{
suport: [
{ value: ‘Application Development’, count: ‘1200+’ },
{ value: ‘Maintenance & Support’, count: ‘3700+’ },
{ value: ‘Quality Assurance’ }
]
}]
}
{ category: ‘Careers’ },
{ category: ‘Sign In’ }
],
template: “#template”});
menu.appendTo(“#menu”);
Pop up menu height Property: overflowHeight

$(“#menu”).ejMenu({
overflowHeight: “200px”
});		 Not applicable

Methods

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

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.disable();		 Not applicable
Disable menu items Method: disableItem

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItem(“Home”);		 Method: enableItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.enableItems(“Home”, false)
Disable menu items by ID Method: disableItemByID

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.disableItemByID(“home_id”);		 Method: enableItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.enableItems(“home_id”, false, true)
Enable Method Method: enable

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.enable();		 Not applicable
Enable menu items Method: enableItem

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItem(“Home”);		 Method: enableItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.enableItems(“Home”, true);
Enable menu items by ID Method: enableItemByID

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.enableItemByID(“home_id”);		 Method: enableItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.enableItems(“home_id”, true, true);
Hide Method Method: hide

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.hide();		 Not applicable
Hide menu items Method: hideItems

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.hideItems([“#search”,”#company”]);		 Method: hideItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.hideItems([“search”,”company”], true);
Insert menu items Method: insert

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.insert([{ id: “More”, text: “More” }], “#Home”);		 Not applicable
Insert menu items after the specified menu item Method: insertAfter

$(“#menu”).ejMenu({ });
menu.insertAfter([{ id: “More”, text: “More” }], “#Home”);		 Method: insertAfter

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.insertAfter([{ id: “More”, text: “More” }], “Home”);
Insert menu items before the specified menu item Method: insertBefore

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.insertBefore([{ id: “More”, text: “More” }], “#Home”);		 Method: insertBefore

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.insertBefore([{ id: “More”, text: “More” }], “Home”);
Remove menu items Method: remove

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.remove([“#Home”]);		 Method: removeItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.removeItems([“Home”]);
To show menu Method: show

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.show();		 Not applicable
To show menu items Method: showItems

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.showItems([“#search”, “#company”]);		 Method: showItems

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.showItems([“Search”, “Company”]);
Destroy method Method: destroy

$(“#menu”).ejMenu({ });
var menu = $(“#menu”).data(“ejMenu”);
menu.destroy();		 Method: destroy

var menu = new ej.navigations.Menu({
items: menuItems
});
menu.appendTo(“#menu”);
menu.destroy();

Events

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

$(“#menu”).ejMenu({
beforeOpen: function(args) { /** code block */ }
});		 Events: beforeOpen

var menu = new ej.navigations.Menu({
items: menuItems
beforeOpen: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers before closing the menu Not applicable Events: beforeClose

var menu = new ej.navigations.Menu({
items: menuItems
beforeClose: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers before rendering each menu item Not applicable Events: beforeItemRender

var menu = new ej.navigations.Menu({
items: menuItems
beforeItemRender: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers while selecting the menu item Events: click

$(“#menu”).ejMenu({
click: function(args) { /** code block */ }
});		 Events: select

var menu = new ej.navigations.Menu({
items: menuItems
select: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers after closing the menu Events: close

$(“#menu”).ejMenu({
close: function(args) { /** code block */ }
});		 Events: onClose

var menu = new ej.navigations.Menu({
items: menuItems
onClose: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers after opening the menu Events: open

$(“#menu”).ejMenu({
open: function(args) { /** code block */ }
});		 Events: onOpen

var menu = new ej.navigations.Menu({
items: menuItems
onOpen: function(args) { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers once the component rendering is completed Events: create

$(“#menu”).ejMenu({
create: function(args) { /** code block */ }
});		 Events: created

var menu = new ej.navigations.Menu({
items: menuItems
created: function() { /** code block */ }
});
menu.appendTo(“#menu”);
Triggers once the component is destroyed Events: destroy

$(“#menu”).ejMenu({
destroy: function(args) { /** code block */ }
});		 Not applicable
Triggers when key down on menu items Events: keydown

$(“#menu”).ejMenu({
keydown: function(args) { /** code block */ }
});		 Not applicable
Triggers when mouse out from menu items Events: mouseout

$(“#menu”).ejMenu({
mouseout: function(args) { /** code block */ }
});		 Not applicable
Triggers when mouse over the Menu items Events: mouseover

$(“#menu”).ejMenu({
mouseover: function(args) { /** code block */ }
});		 Not applicable
Triggers when overflow popup menu opens Events: overflowOpen

$(“#menu”).ejMenu({
overflowOpen: function(args) { /** code block */ }
});		 Not applicable
Triggers when overflow popup menu closes Events: overflowClose

$(“#menu”).ejMenu({
overflowClose: function(args) { /** code block */ }
});		 Not applicable