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 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: “fileid” }, { text: “Edit”, id: “editid”, 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: “viewid”, url: ”#” }, { text: “Help”, id: “helpid” } ]; } |
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: “fileid”, text: “File”, parentId: null }, { id: “editid”, text: “Edit”, parentId: null }, { id: “viewid”, text: “View”, parentId: null }, { id: “helpid”, 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 |
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([“#helpid”,“#editid”]); |
Method: hideItems <MenuComponent id="menu" ref={(scope) => {this.menu = scope}} items={this.menuItems}></MenuComponent> constructor(props: {}) { this.menu.hideItems([“editid”,“helpid”], 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(); } |
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 |