ejMenu
12 Oct 201724 minutes to read
The Menu control supports displaying a Menu created from list items. The Menu is based on a hierarchy of UL and LI elements where the list items are rendered as sub-menu items.
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [fields]="fieldsvalues">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
constructor() {
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
Requires
-
module:jQuery
-
module:jquery.easing.1.3.min.js
-
module:ej.core.js
-
module:ej.data.js
-
module:ej.menu.js
-
module:ej.checkbox.js
Members
animationType enum
To enable or disable the Animation while hover or click an menu items.See AnimationType
Name | Type | Default | Description |
---|---|---|---|
Default | string | default | Used to set AnimationType as Default |
None | string | none | Used to set AnimationType as None |
Default Value
- ej.AnimationType.Default
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [animationType]="default" [fields]="fieldsvalues">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
constructor() {
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
contextMenuTarget string
Specifies the target id of context menu. On right clicking the specified contextTarget element, context menu gets shown.
Default Value
- null
Example
<div id="target" class="textarea">
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>),within the web page content. HTML tags most commonly come in pairs like and ,although
some tags, known as empty elements, are unpaired, for example
<img>. The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses
the tags to interpret the content of the page.
</div>
<ej-menu id="contextMenu" [menuType]="type" [contextMenuTarget]="target" [fields.dataSource]="data"></ej-menu>
import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'sd-home',
templateUrl: 'app/components/menu/menu.component.html',
styleUrls: ['app/components/menu/menu.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MenuComponent {
type: any;
data: array;
target: any;
constructor() {
this.type = ej.MenuType.ContextMenu;
this.data = [
{ id: 1, text: "Cut" },
{ id: 2, text: "Copy" },
{ id: 3, text: "Paste" },
{ id: 4, text: "Comments" },
{ id: 5, text: "Links" },
{ id: 6, text: "Clear Formatting" }
];
this.target = "#target";
}
}
Add the following code in menu.component.css file.
.textarea {
border: 1px solid;
padding: 10px;
position: relative;
text-align: justify;
width: 463px;
color: gray;
margin: 0 auto;
}
container string
Specifies the container element selectors for submenu’s collision. The submenu gets displayed based on spacing available with respect to container element.
Default Value
- null
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menutemplate" [container]="container">
<li><a>Books</a>
<ul>
<li>
<div class="temp temp1">
<span>BOOKS</span>
<ul>
<li><a>New Releases</a></li>
<li><a>Bestsellers</a></li>
<li><a>Upcoming</a></li>
<li><a>Box Sets</a></li>
</ul>
<ul>
<li><a>HTML Basics</a></li>
<li><a>JavaScript</a></li>
<li><a>JQuery</a></li>
<li><a>PHP Basics</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li><a>Cameras</a>
<ul>
<li>
<div class=" temp temp2">
<div>
<span>CAMERAS</span>
<ul>
<li><a>Point & Shoots</a></li>
<li><a>Digital SLR</a></li>
<li><a>Camcorders</a></li>
<li><a>Bestsellers</a></li>
</ul>
<ul>
<li><a>Still Camera</a></li>
<li><a>Digital Camera</a></li>
<li><a>Video Camera</a></li>
<li><a>Virtual Camera</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><a>Movies</a>
<ul>
<li>
<div class="temp temp3">
<div>
<span>MOVIES</span>
<ul>
<li><a>Genobili Actions</a></li>
<li><a>Jackie Rocks</a></li>
<li><a>Men In Blue</a></li>
<li><a>Human vs Alien</a></li>
</ul>
<ul>
<li><a>Million Dreams</a></li>
<li><a>Kung-fu</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><a>Musics</a>
<ul>
<li>
<div class="temp temp4">
<div>
<span>MUSICS</span>
<ul>
<li><a>New Releases</a></li>
<li><a>Bestsellers</a></li>
<li><a>Devotional</a></li>
<li><a>Sufi & Ghazal</a></li>
</ul>
<ul>
<li><a>Pop songs</a></li>
<li><a>Rock Music</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li><a>Gaming</a>
<ul>
<li>
<div class="temp temp5">
<div>
<span>GAMING</span>
<ul>
<li><a>Upcoming</a></li>
<li><a>PC</a></li>
<li><a>PS Vista</a></li>
<li><a>PS3</a></li>
<li><a>XBox</a></li>
<li><a>Consoles</a></li>
</ul>
<ul>
<li><a>FIFA 2999</a></li>
<li><a>NBA Actions</a></li>
<li><a>Crick Champions</a></li>
<li><a>Carom legend</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './template.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class TemplateComponent {
container: string;
constructor() {
this.container = "#menu_controls";
}
}
cssClass string
Specify the CSS class to achieve custom theme.
Default Value
- ””
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" (animationType)="none" [fields]="fieldsvalues" cssClass="gradiednt lime">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
constructor() {
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
enableAnimation boolean
To enable or disable the Animation effect while hover or click an menu items.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
enableCenterAlign boolean
Specifies the root menu items to be aligned center in horizontal menu.
Default Value
- false
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
enabled boolean
Enable / Disable the Menu control.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
enableRTL boolean
Specifies the menu items to be displayed in right to left direction.
Default Value
- false
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableRTL]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
enableSeparator boolean
When this property sets to false, the menu items is displayed without any separators.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableSeparator]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
excludeTarget string
Specifies the target which needs to be excluded. i.e., The context menu will not be displayed in those specified targets.
Default Value
- null
Example
<div id="target" class="textarea">
HTML is written in the form of HTML elements consisting of tags enclosed in angle
brackets (like <html>),within the web page content. HTML tags most commonly come in pairs like and ,although
some tags, known as empty elements, are unpaired, for example
<img>. The purpose of a web browser is to read HTML documents and compose them into
visible or audible web pages. The browser does not display the HTML tags, but uses
the tags to interpret the content of the page.
<div class="inner">
Context Menu will not be displayed here !!
</div>
</div>
<ej-menu id="contextMenu" [menuType]="type" [contextMenuTarget]="target" [fields.dataSource]="data" excludeTarget=".inner"></ej-menu>
import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';
@Component({
selector: 'sd-home',
templateUrl: 'app/components/menu/menu.component.html',
styleUrls: ['app/components/menu/menu.component.css'],
encapsulation: ViewEncapsulation.None
})
export class MenuComponent {
type: any;
data: array;
target: any;
constructor() {
this.type = ej.MenuType.ContextMenu;
this.data = [
{ id: 1, text: "Cut" },
{ id: 2, text: "Copy" },
{ id: 3, text: "Paste" },
{ id: 4, text: "Comments" },
{ id: 5, text: "Links" },
{ id: 6, text: "Clear Formatting" }
];
this.target = "#target";
}
}
fields object
Fields used to bind the data source and it includes following field members to make data bind easier.
Default Value
- null
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
fields.child object
It receives the child data for the inner level.
fields.dataSource object
It receives datasource as Essential DataManager object and JSON object.
fields.htmlAttribute string
Specifies the HTML attributes to “LI” item list.
fields.id string
Specifies the id to menu items list
fields.imageAttribute string
Specifies the image attribute to “img” tag inside items list.
fields.imageUrl string
Specifies the image URL to “img” tag inside item list.
fields.linkAttribute string
Adds custom attributes like “target” to the anchor tag of the menu items.
fields.parentId string
Specifies the parent id of the table.
fields.query object
It receives query to retrieve data from the table (query is same as SQL).
fields.spriteCssClass string
Specifies the sprite CSS class to “LI” item list.
fields.tableName string
It receives table name to execute query on the corresponding table.
fields.text string
Specifies the text of menu items list.
fields.url string
Specifies the URL to the anchor tag in menu item list.
height string|number
Specifies the height of the root menu.
Default Value
- “auto”
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
htmlAttributes object
Specifies the list of HTML attributes to be added to menu control.
Default Value
- {}
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [htmlAttributes]="htmlattributes">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
htmlattributes: any;
constructor() {
this.enableAnimation = true;
this.htmlattributes = {"aria-label":"menu"};
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
isResponsive boolean
Enables/disables responsive support for the Menu control during the window resizing time.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [isResponsive]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
menuType string|enum
Specifies the type of the menu. Essential JavaScript Menu consists of two type of menu, they are Normal Menu and Context Menu mode.See MenuType
Name | Type | Default | Description |
---|---|---|---|
ContextMenu | string | contextmenu | Used to set MenuType as ContextMenu |
NormalMenu | string | normal menu | Used to set MenuType as NormalMenu |
Default Value
- ej.MenuType.NormalMenu
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" menuType="normalmenu">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
openOnClick boolean
Specifies the sub menu items to be show or open only on click.
Default Value
- false
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [openOnClick]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
orientation string|enum
Specifies the orientation of normal menu. Normal menu can rendered in horizontal or vertical direction by using this API. See Orientation
Name | Type | Default | Description |
---|---|---|---|
Horizontal | string | horizontal | Used to set Orientation as Horizontal |
Vertical | string | vertical | Used to set Orientation as Vertical |
Default Value
- ej.Orientation.Horizontal
Example
<div id="menu_controls">
<ej-menu id="menu" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" orientation="vertital">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
showRootLevelArrows boolean
Specifies the main menu items arrows only to be shown if it contains child items.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [showRootLevelArrows]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
showSubLevelArrows boolean
Specifies the sub menu items arrows only to be shown if it contains child items.
Default Value
- true
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [showSubLevelArrows]=true>
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
subMenuDirection string|enum
Specifies position of pull down submenu that will appear on mouse over.See Direction
Name | Type | Default | Description |
---|---|---|---|
Left | string | left | Used to set Direction as Left |
None | string | none | Used to set Direction as None |
Right | string | right | Used to set Direction as Right |
Default Value
- ej.Direction.Right
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" subMenuDirection="right">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
titleText string
Specifies the title to responsive menu.
Default Value
- “Menu”
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" titleText="Menu" [fields]="fieldsvalues">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
width string|number
Specifies the width of the main menu.
Default Value
- auto
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" width="500px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
overflowHeight string|number
Specifies the popup menu height.
Default Value
- auto
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [overflowHeight]="200px">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
overflowWidth string|number
Specifies the popup menu width.
Default Value
- auto
Example
<div id="menu_controls" style="height:300px">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [overflowWidth]="200px">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
}
Methods
disable()
Disables the Menu control.
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
<button type="button" (click)="OnClick()">Disable</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.disable();
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
<button type="button" (click)="OnClick()">Disable</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("disable");
}
}
disableItem(itemtext)
Specifies the Menu Item to be disabled by using the Menu Item Text.
Name | Type | Description |
---|---|---|
itemtext | string | Specifies the Menu Item Text to be disabled. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
<button type="button" (click)="OnClick()">DisableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.disableItem("Mail");
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
<button type="button" (click)="OnClick()">DisableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("disableItem","Mail");
}
}
disableItemByID(itemid)
Specifies the Menu Item to be disabled by using the Menu Item Id.
Name | Type | Description |
---|---|---|
itemid | string|number | Specifies the Menu Item id to be disabled |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">DisableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.disableItem(1);
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enableCenterAlign]=true>
</ej-menu>
<button type="button" (click)="OnClick()">DisableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("disableItemByID","1");
}
}
enable()
Enables the Menu control.
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false>
</ej-menu>
<button type="button" (click)="OnClick()">Enable</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.enable();
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false>
</ej-menu>
<button type="button" (click)="OnClick()">Enable</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("enable");
}
}
enableItem(itemtext)
Specifies the Menu Item to be enabled by using the Menu Item Text.
Name | Type | Description |
---|---|---|
itemtext | string | Specifies the Menu Item Text to be enabled. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false>
</ej-menu>
<button type="button" (click)="OnClick()">EnableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.enableItem("Mail");
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false>
</ej-menu>
<button type="button" (click)="OnClick()">EnableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("enableItem","Mail");
}
}
enableItemByID(itemid)
Specifies the Menu Item to be enabled by using the Menu Item Id.
Name | Type | Description |
---|---|---|
itemid | string|number | Specifies the Menu Item id to be enabled. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false >
</ej-menu>
<button type="button" (click)="OnClick()">EnableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.enableItem(1);
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" [enabled]=false>
</ej-menu>
<button type="button" (click)="OnClick()">EnableItem</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("enableItemByID","1");
}
}
hide()
Hides the Context Menu control.
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">Hide</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.hide();
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">Hide</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("hide");
}
}
hideItems([itemID])
Hides the specific items in Menu control.
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">HideItems</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.hideItems(["#1","#2"]);
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">HideItems</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("hideItems","#1");
}
}
insert(item, target)
Insert the menu item as child of target node.
Name | Type | Description |
---|---|---|
item | Object | Information about Menu item. |
target | string|Object | Selector of target node or Object of target node. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.insert([{
id: "More",
text: "More"
}], "#1");
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("insert", [{
id: "More",
text: "More"
}], "#1");
}
}
insertAfter(item, target)
Insert the menu item after the target node.
Name | Type | Description |
---|---|---|
item | Object | Information about Menu item. |
target | string|Object | Selector of target node or Object of target node. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.insertAfter([{
id: "More",
text: "More"
}], "#1");
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("insertAfter", [{
id: "More",
text: "More"
}], "#1");
}
}
insertBefore(item, target)
Insert the menu item before the target node.
Name | Type | Description |
---|---|---|
item | Object | Information about Menu item. |
target | string|Object | Selector of target node or Object of target node. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.insertBefore([{
id: "More",
text: "More"
}], "#1");
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">Insert</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("insertBefore", [{
id: "More",
text: "More"
}], "#1");
}
}
remove(target)
Remove Menu item.
Name | Type | Description |
---|---|---|
target | object|array | Selector of target node or Object of target node. |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
</ej-menu>
<button type="button" (click)="OnClick()">Remove</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.remove(["#1"]);
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" >
</ej-menu>
<button type="button" (click)="OnClick()">Remove</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("remove",["#1"]);
}
}
show(locationX, locationY, targetElement, event)
To show the Menu control.
Name | Type | Description |
---|---|---|
locationX | number | x co-ordinate position of context menu. |
locationY | number | y co-ordinate position of context menu. |
targetElement | object | target element |
event | object | name of the event |
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create()">
</ej-menu>
<button type="button" (click)="OnClick()">Show</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
create(){
$("#menu").ejMenu("hide");
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.show();
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create()">
</ej-menu>
<button type="button" (click)="OnClick()">Show</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
create(){
$("#menu").ejMenu("hide");
}
OnClick(){
$("#menu").ejMenu("show");
}
}
showItems([itemID])
Show the specific items in Menu control.
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create()">
</ej-menu>
<button type="button" (click)="OnClick()">Show</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
create(){
$("#menu").ejMenu("hide");
}
OnClick(){
var obj = $("#menu").data("ejMenu");
obj.showItems(["#1","#2"]);
}
}
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create()">
</ej-menu>
<button type="button" (click)="OnClick()">Show</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
create(){
$("#menu").ejMenu("hide");
}
OnClick(){
$("#menu").ejMenu("showItems",["#1","#2"]);
}
}
Events
beforeOpen
Fires before context menu gets open.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from context menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (beforeOpen)="beforeOpen($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
beforeOpen(args){
}
}
click
Fires when mouse click on menu items.
Name | Type | Description | |||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (click)="OnClick($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(args){
}
}
close
Fire when context menu on close.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (close)="Close($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
Close(args){
}
}
open
Fires when context menu on open.
Name | Type | Description | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (open)="Open($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
Open(args){
}
}
create
Fires to create menu items.
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
create(args){
}
}
destroy
Fires to destroy menu items.
Name | Type | Description | |||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (destroy)="destroy($event)">
</ej-menu>
<button type="button" (click)="OnClick()">Destroy</button>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
OnClick(){
$("#menu").ejMenu("destroy");
}
destroy(args){
}
}
keydown
Fires when key down on menu items.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (keydown)="keydown($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
keydown(args){
}
}
mouseout
Fires when mouse out from menu items.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (mouseout)="mouseOut($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
mouseOut(args){
}
}
mouseover
Fires when mouse over the Menu items.
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (mouseover)="mouseOver($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
mouseOver(args){
}
}
overflowOpen
Fires when overflow popup menu opens.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (clickoverflowOpen)="overflowOpen($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
overflowOpen(args){
}
}
overflowClose
Fires when overflow popup menu closes.
Name | Type | Description | |||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
argument | Object | Event parameters from menu
|
Example
<div id="menu_controls">
<ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (overflowClose)="overflowClose($event)">
</ej-menu>
</div>
import { Component } from '@angular/core';
import { ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ej-app',
templateUrl: './default.component.html',
styleUrls: ['./menu.component.css'],
encapsulation: ViewEncapsulation.None,
})
export class DefaultComponent{
data: Array<any>;
fieldsvalues: Object;
enableAnimation: boolean;
constructor() {
this.enableAnimation = true;
this.data = [
{ id: 1, text: 'Mail', parentId: null },
{ id: 2, text: 'Calender', parentId: null },
{ id: 3, text: 'Notes', parentId: null },
{ id: 4, text: 'Contacts', parentId: null },
// first level child
{ id: 11, parentId: 1, text: 'Inbox', sprite: 'mailicon sprite-inbox' },
{ id: 12, parentId: 1, text: 'Drafts', sprite: 'mailicon sprite-drafts' },
{ id: 13, parentId: 1, text: 'Sent items', sprite: 'mailicon sprite-sentitems' },
{ id: 14, parentId: 1, text: 'Deleted', sprite: 'mailicon sprite-deleted' },
{ id: 15, parentId: 1, text: 'Junk mails', sprite: 'mailicon sprite-junk' },
{ id: 16, parentId: 1, text: 'Personal', sprite: 'mailicon sprite-folders' },
{ id: 17, parentId: 2, text: 'My Calender', sprite: 'mailicon sprite-calendar' },
{ id: 18, parentId: 2, text: 'Team', sprite: 'mailicon sprite-calendar' },
{ id: 19, parentId: 2, text: 'Others', sprite: 'mailicon sprite-calendar' },
{ id: 20, parentId: 3, text: 'My Reference', sprite: 'mailicon sprite-folder' },
{ id: 21, parentId: 3, text: 'Team Meeting', sprite: 'mailicon sprite-folder' },
{ id: 22, parentId: 3, text: 'Others', sprite: 'mailicon sprite-folder' },
{ id: 23, parentId: 4, text: 'Suggested', sprite: 'mailicon sprite-contacts' },
{ id: 24, parentId: 4, text: 'My Team', sprite: 'mailicon sprite-contacts' },
{ id: 25, parentId: 4, text: 'Others', sprite: 'mailicon sprite-contacts' },
// second level child
{ id: 111, parentId: 11, text: 'Development', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'Supports', sprite: 'mailicon sprite-folders' },
{ id: 111, parentId: 11, text: 'HR Team', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Support Template', sprite: 'mailicon sprite-folders' },
{ id: 112, parentId: 12, text: 'Personal', sprite: 'mailicon sprite-folders' }
];
this.fieldsvalues = { dataSource: this.data, parentId: 'parentId', id: 'id', text: 'text', spriteCssClass: 'sprite' };
}
overflowClose(args){
}
}