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

  • HTML
  • <div id="menu_controls" style="height:300px">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [fields]="fieldsvalues">
    </ej-menu>
    </div>
  • TS
  • 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

  • HTML
  • <div id="menu_controls" style="height:300px">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [animationType]="default" [fields]="fieldsvalues">
    </ej-menu>
    </div>
  • TS
  • 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

  • HTML
  • <div id="target" class="textarea">
            HTML is written in the form of HTML elements consisting of tags enclosed in angle
            brackets (like &lt;html&gt;),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
            &lt;img&gt;. 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>
  • HTML
  • 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.

  • HTML
  • .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

  • HTML
  • <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>
  • HTML
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <div id="menu_controls" style="height:300px">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
    </ej-menu>
    </div>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <div id="target" class="textarea">
            HTML is written in the form of HTML elements consisting of tags enclosed in angle
            brackets (like &lt;html&gt;),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
            &lt;img&gt;. 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>
  • HTML
  • 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

  • HTML
  • <div id="menu_controls" style="height:300px">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues">
    </ej-menu>
    </div>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" orientation="vertital">
    </ej-menu>
    </div>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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();
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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");
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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);
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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();
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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");
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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);
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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();
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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"]);
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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");
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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");
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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");
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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"]);
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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();
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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

  • HTML
  • <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>
  • TS
  • 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"]);
    
    }
    }
  • HTML
  • <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>
  • TS
  • 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
    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (beforeOpen)="beforeOpen($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event
    selectedItem number returns the selected item

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (click)="OnClick($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (close)="Close($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    target object returns the target element

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (open)="Open($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (create)="create($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event

    Example

  • HTML
  • <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>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    menuText string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (keydown)="keydown($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (mouseout)="mouseOut($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    text string returns clicked menu item text
    element object returns clicked menu item element
    event object returns the event

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (mouseover)="mouseOver($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    e object returns the event object
    cancel boolean if the event should be cancelled ; otherwise ,false

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (clickoverflowOpen)="overflowOpen($event)">
    </ej-menu>
    </div>
  • TS
  • 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
    Name Type Description
    model object returns the menu model
    type string returns the name of the event
    e object returns the event object
    cancel boolean if the event should be cancelled ; otherwise ,false

    Example

  • HTML
  • <div id="menu_controls">
    <ej-menu id="menu" height="30px" [fields.dataSource]="data" [enableAnimation]="enableAnimation" [fields]="fieldsvalues" (overflowClose)="overflowClose($event)">
    </ej-menu>
    </div>
  • TS
  • 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){
    
    
    
    
    }
    }