Ej1 api migration in React Menu component

30 Jan 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

var animationType = ej.AnimationType.Default;
<EJ.Menu id="menu" animationType={animationType}></EJ.Menu> 		Not applicable
Context menu target Property: contextMenuTarget

<EJ.Menu id="menu" contextMenuTarget="#target"></EJ.Menu> 		Not applicable
Container element for submenu’s collision Property: container

<EJ.Menu id="menu" contextMenuTarget="#target" container="#target"></EJ.Menu> 		Not applicable
Menu items Not applicable Property: items

<MenuComponent id="menu" items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menuItems = [
  {
    text: “File”, id: “file_id”
  },
  {
    text: “Edit”,
    id: “edit_id”,
    items: [
      { text” “Cut”, iconCss: “e-icons e-cut” },
      { text: “Copy”, iconCss: “e-icons e-copy” },
      { text: “Paste”, iconCss: “e-icons e-paste” }
    ]
  },
  {
    text: “view”, id: “view_id”, url: “#”
  },
  {
    text: “Help”, id: “help_id”
  }
];
}
Adding custom class Property: cssClass

<EJ.Menu id="menu" cssClass="custom-class"></EJ.Menu> 		Property: cssClass

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

<EJ.Menu id="menu" enableAnimation={true}></EJ.Menu> 		Not applicable
Animation settings Not applicable Property: animationSettings

<MenuComponent id="menu" animationSettings={this.animation} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.animationSettings = { effect: ‘ZoomIn’ };
}
Root menu items to be aligned center in horizontal menu Property: enableCenterAlign

<EJ.Menu id="menu" enableCenterAlign={true}></EJ.Menu> 		Not applicable
Disabled state Property: enabled

<EJ.Menu id="menu" enabled={false}></EJ.Menu> 		Property: disabled

<MenuComponent id="menu" disabled={true} items={this.menuItems}></MenuComponent>
RTL Property: enableRTL

<EJ.Menu id="menu" enableRTL={true}></EJ.Menu> 		Property: enableRtl

<MenuComponent id="menu" disabled={true} items={this.menuItems} enableRtl={true}></MenuComponent>
Enables/Disables the separator Property: enableSeparator

<EJ.Menu id="menu" enableSeparator={false}></EJ.Menu> 		Not applicable
Menu Type Property: menuType

<EJ.Menu id="menu" menuType="contextmenu"></EJ.Menu> 		Not applicable
Exclude target for context menu Property: excludeTarget

<EJ.Menu id="menu" menu-type="contextmenu" contextMenuTarget="#target" excludeTarget=".inner"></EJ.Menu> 		Not applicable
Fields Property: fields

var data = [
  { id: “file_id”, text: “File”, parentId: null },
  { id: “edit_id”, text: “Edit”, parentId: null },
  { id: “view_id”, text: “View”, parentId: null },
  { id: “help_id”, text: “Help”, parentId: null }
];
<EJ.Menu id="menu" fields-dataSource={data} fields-id="id" fields-text="text" fields-parentid="parentId"></EJ.Menu> 		Property: fields

<MenuComponent id="menu" disabled={true} items={this.menuItems} fields={this.menuFields}></MenuComponent>
constructor(props: {}) {
  this.menuFields = { text: [“text”], children: [“children”] };
}
Height Property: height

<EJ.Menu id="menu" height="50px"></EJ.Menu> 		Not applicable
Width Property: width

<EJ.Menu id="menu" width="800px"></EJ.Menu> 		Not applicable
HTML Attributes Property: htmlAttributes

var attributes = { “aria-label”:”menu” }
<EJ.Menu id="menu" htmlAttribute={attributes}></EJ.Menu> 		Not applicable
Responsive Property: isResponsive

<EJ.Menu id="menu" isResponsive={true}></EJ.Menu> 		Not applicable
Show item on click Property: openOnClick

<EJ.Menu id="menu" openOnClick={true}></EJ.Menu> 		Property: showItemOnClick

<MenuComponent id="menu" showItemOnClick={true} items={this.menuItems}></MenuComponent>
Orientation Property: orientation

<EJ.Menu id="menu" orientation="vertical"></EJ.Menu> 		Property: orientation

<MenuComponent id="menu" orientation="Vertical" items={this.menuItems}></MenuComponent>
Show root level arrows Property: showRootLevelArrows

<EJ.Menu id="menu" showRootLevelArrows={false}></EJ.Menu> 		Not applicable
Show sub level arrows Property: showSubLevelArrows

<EJ.Menu id="menu" showSubLevelArrows={false}></EJ.Menu> 		Not applicable
Sub menu direction Property: subMenuDirection

<EJ.Menu id="menu" subMenuDirection="left"></EJ.Menu> 		Not applicable
Title Property: titleText

<EJ.Menu id="menu" titleText="Title of the Menu"></EJ.Menu> 		Not applicable
Template Not applicable Property: template

<MenuComponent id="menu" items={this.data} fields={this.menuFields} template="#menuTemplate"></MenuComponent>
Pop up menu height Property: overflowHeight

<EJ.Menu id="menu" overflowHeight="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’).ejMenu(‘instance’);
menu.disable();		 Not applicable
Disable menu items Method: disableItem

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.disableItem(“File”);		 Method: enableItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.enableItems(“File”, false);
}
Disable menu items by ID Method: disableItemByID

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.disableItemByID(“file_id”);		 Method: enableItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.enableItems(“file_id”, false, true);
}
Enable Method Method: enable

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.enable();		 Not applicable
Enable menu items Method: enableItem

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.enableItem(“File”);		 Method: enableItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.enableItems(“File”, true);
}
Enable menu items by ID Method: enableItemByID

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.enableItemByID(“file_id”);		 Method: enableItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.enableItems(“file_id”, true, true);
}
Hide Method Method: hide

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.hide();		 Not applicable
Hide menu items Method: hideItems

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.hideItems([“#help_id”,”#edit_id”]);		 Method: hideItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.hideItems([“edit_id”,”help_id”], true);
}
Insert menu items Method: insert

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
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"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.insertAfter([{ id: “view_id”, text: “View” }], “#edit_id”);		 Method: insertAfter

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.insertAfter([{ id: “view_id”, text: “View” }], “Edit”);
}
Insert menu items before the specified menu item Method: insertBefore

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.insertBefore([{ id: “view_id”, text: “View” }], “#help_id”);		 Method: insertBefore

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.insertBefore([{ id: “view_id”, text: “View” }], “Help”);
}
Remove menu items Method: remove

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.remove([“#Edit”]);		 Method: removeItems

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.menu.removeItems([“Edit”]);
}
To show menu Method: show

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.show();		 Not applicable
Destroy method Method: destroy

<EJ.Menu id="menu"></EJ.Menu>
var menu = $(‘#menu’).ejMenu(‘instance’);
menu.destroy();		 Method: destroy

<MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent>
constructor(props: {}) {
  this.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" beforeOpen={beforeOpen}></EJ.Menu>
function beforeOpen(args) {
    /** code block */
}		 Events: beforeOpen

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

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

<MenuComponent id="menu" items={this.menuItems} beforeItemRender={this.beforeItemRender.bind(this)}></MenuComponent>
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

<MenuComponent id="menu" items={this.menuItems} select={this.select.bind(this)}></MenuComponent>
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

<MenuComponent id="menu" items={this.menuItems} onClose={this.onClose.bind(this)}></MenuComponent>
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

<MenuComponent id="menu" items={this.menuItems} onOpen={this.onOpen.bind(this)}></MenuComponent>
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

<MenuComponent id="menu" items={this.menuItems} created={this.created.bind(this)}></MenuComponent>
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" overflowOpen={overflowOpen}></EJ.Menu>
function overflowOpen(args) {
    /** code block */
}		 Not applicable
Triggers when overflow popup menu closes Events: overflowClose

<EJ.Menu id="menu" overflowClose={overflowClose}></EJ.Menu>
function overflowClose(args) {
    /** code block */
}		 Not applicable