Ej1 api migration in EJ2 TypeScript Menu control

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

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

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

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

new ej.Menu($(“#menu”), {
cssClass: “e-custom-class”
});		 Property: cssClass

let menu: Menu= new 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

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

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

new ej.Menu($(“#menu”), {
enabled: false
});		 Property: disabled

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

new ej.Menu($(“#menu”), {
enableRTL: true
});		 Property: enableRtl

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

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

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

new ej.Menu($(“#menu”), {
fields: menuFields
});		 Property: fields

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

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

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

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

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

new ej.Menu($(“#menu”), {
openOnClick: true
});		 Property: showItemOnClick

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

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

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

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

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

new ej.Menu($(“#menu”), {
subMenuDirection: “left”
});		 Not applicable
Title Property: titleText

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

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

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

let menu: Menu= new 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

new ej.Menu($(“#menu”), {
overflowHeight: “200px”
});		 Not applicable

Methods

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

var menu = new ej.Menu($(“#menu”), { });
menu.disable();		 Not applicable
Disable menu items Method: disableItem

var menu = new ej.Menu($(“#menu”), { });
menu.disableItem(“Home”);		 Method: enableItems

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

var menu = new ej.Menu($(“#menu”), { });
menu.disableItemByID(“home_id”);		 Method: enableItems

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

var menu = new ej.Menu($(“#menu”), { });
menu.enable();		 Not applicable
Enable menu items Method: enableItem

var menu = new ej.Menu($(“#menu”), { });
menu.enableItem(“Home”);		 Method: enableItems

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

var menu = new ej.Menu($(“#menu”), { });
menu.enableItemByID(“home_id”);		 Method: enableItems

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

var menu = new ej.Menu($(“#menu”), { });
menu.hide();		 Not applicable
Hide menu items Method: hideItems

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

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

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

var menu = new ej.Menu($(“#menu”), { });
menu.insertAfter([{ id: “More”, text: “More” }], “#Home”);		 Method: insertAfter

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

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

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

var menu = new ej.Menu($(“#menu”), { });
menu.remove([“#Home”]);		 Method: removeItems

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

var menu = new ej.Menu($(“#menu”), { });
menu.show();		 Not applicable
To show menu items Method: showItems

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

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

var menu = new ej.Menu($(“#menu”), { });
menu.destroy();		 Method: destroy

let menu: Menu= new 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

var menu = new ej.Menu($(“#menu”), {
beforeOpen: function(args) { /** code block */ }
});		 Events: beforeOpen

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

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

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

var menu = new ej.Menu($(“#menu”), {
click: function(args) { /** code block */ }
});		 Events: select

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

var menu = new ej.Menu($(“#menu”), {
close: function(args) { /** code block */ }
});		 Events: onClose

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

var menu = new ej.Menu($(“#menu”), {
open: function(args) { /** code block */ }
});		 Events: onOpen

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

var menu = new ej.Menu($(“#menu”), {
create: function(args) { /** code block */ }
});		 Events: created

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

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

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

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

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

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

var menu = new ej.Menu($(“#menu”), {
overflowClose: function(args) { /** code block */ }
});		 Not applicable