ejmMenu

Mobile Menu Control provides an interface to easily navigate hierarchical data.

Custom Design for Html Menu control.

$(element).ejmMenu()

Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem" });
            });
        </script>

    Requires

    • module:jQuery

    • module:ej.core

    • module:ej.unobtrusive

    • module:ej.mobile.core

    • module:ej.data

    • module:ej.touch

    • module:ej.mobile.scrollbar

    • module:ej.mobile.scrollpanel

    Members

    allowScrolling Boolean

    Specifies whether to allow scrolling behavior for the contents.

    Default Value:

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-allowscrolling=true>
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set allowScrolling on initialization.
            // To set allowScrolling API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", allowScrolling: true });
            });
        </script>

    cancelButton Object

    Specifies the cancel button of the menu control.

    NOTE

    Cancel button is shown only for Actionsheet type

    cancelButton.color String

    Specifies the color of the cancel button text.

    Default Value:

    • “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-cancelbutton-color="red">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", cancelButton: { color: "red" } });
            });
        </script>

    cancelButton.show Boolean

    Specifies the show or hide of the menu control.

    Default Value:

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-cancelbutton-show="false">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", cancelButton: { show: false } });
            });
        </script>

    cancelButton.text String

    Specifies to customize the cancel button text.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-cancelbutton-text="close">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", cancelButton: { text: "close" } });
            });
        </script>

    color String

    Specifies the text color of the menu item.

    Default Value:

    • “”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info" data-ej-color="red"></li>
                <li data-ej-text="Show in folder" data-ej-color="green"></li>
                <li data-ej-text="Delete" data-ej-color="blue"></li>
            </ul>
        </div>

    cssClass String

    Sets the root class for Menu theme. This cssClass API helps to use custom skinning option for Menu control. By defining the root class using this API, we need to include this root class in CSS.

    Default Value:

    • ””

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-cssclass="customclass">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set cssClass on initialization.
            // To set cssClass API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", "cssClass": "customclass" });
            });
        </script>

    dataSource data

    Specifies the data source for Menu rendering. In Menu, options can be given as data source of JSON array.

    Default Value:

    • []

    Example

  • html
  • <!-- Unobtrusive way of rendering -->    
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-datasource="window.listData" data-ej-fields-text="name"></div>
  • html
  • <!-- Obtrusive way of rendering -->  
      <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
        </div>
        <script>
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", dataSource: window.listData, fields: { text: "name" } });
            });
        </script>

    enablePersistence Boolean

    Specifies to maintain the current model value to browser cookies for state maintenance. While refresh the page, the model value will get apply to the control from browser cookies.

    Default Value:

    • false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" data-ej-enablepersistence="true" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-enablepersistence="true">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" data-ej-enablepersistence="true" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set enablePersistence on initialization.
            // To set enablePersistence API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", enablePersistence: true });
            });
        </script>

    enableRippleEffect Boolean

    Specifies the ripple effect for the menu control. By default in android mode its value is true and other rendermode we need to set as true.

    Default Value:

    • ej.isAndroid()?true:false

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-enablerippleeffect="true">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", enableRippleEffect: true });
            });
        </script>

    fields

    Fields used to bind the data source and it includes following field members to make data bind easier.

    fields.color String

    Specifies the text color of menu item.

    Default Value:

    • “”.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-datasource='window.listData' data-ej-fields-color='color' data-ej-fields-text='name'>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
        </div>
        <script>
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", dataSource: window.listData, fields: { text: "name", color: "color" } });
            });
        </script>

    fields.href String

    Specifies the URL to navigate to when the item is clicked.

    Default Value:

    • null.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-datasource='window.listData' data-ej-fields-href='href' data-ej-fields-text='name'>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
        </div>
        <script>
            $(function () {
    
                $("#menu").ejmMenu({ target: "menuitem", dataSource: window.listData, fields: { text: "name", href: "href" } });
            });
        </script>

    fields.text String

    Specifies the text to display on the menu item.

    Default Value:

    • “”.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-datasource='window.listData' data-ej-fields-text='name'>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
        </div>
        <script>
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", dataSource: window.listData, fields: { text: "name" } });
            });
        </script>

    height Int

    Specifies the height of the menu control.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-height="150">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set height on initialization.
            // To set height API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", height: 150 });
            });
        </script>

    href String

    Specifies the href of the menu items.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Desktop" data-ej-href="http://js.syncfusion.com/demos/mobile/"></li>
                <li data-ej-text="Phone" data-ej-href="http://js.syncfusion.com/demos/mobile/phone"></li>
                <li data-ej-text="Home" data-ej-href="http://www.syncfusion.com"></li>
            </ul>
        </div>

    locale String

    Change the menu text format based on given culture.

    Default Value:

    • “en-US”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-locale="zh-CN">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            ej.mobile.Menu.Locale['zh-CN'] = {
                title: "標題"
            };
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", locale: "zh-CN" });
            });
    		ej.mobile.Menu.Locale['zh-CN'] = {
                title: "標題"
            };
        </script>

    query ej.Query

    Specifies the query to execute with the datasource.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <script>
            var query = ej.Query().take(2);
        </script>
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-query="query" data-ej-datasource="window.listData" data-ej-fields-text="name">
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
        </div>
        <script>
            var query = ej.Query().take(2);
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", dataSource: window.listData, fields: { text: "name" }, query: query });
            });
        </script>

    renderMode Enum

    Specifies the rendering mode of the Menu control. SeeRenderMode

    Default Value:

    • auto

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" data-ej-rendermode="auto" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-rendermode="auto">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" data-ej-rendermode="auto" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set rendermode on initialization.
            // To set renderMode API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", renderMode: ej.mobile.RenderMode.Auto });
            });
        </script>

    showArrow Boolean

    Specifies to show the popover menu arrow.

    Default Value:

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-type="popover" data-ej-showarrow="true">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", showArrow: true, type: "popover" });
            });
        </script>

    showOn String

    Specifies in which action need to show the menu. SeeShowOn

    Default Value:

    • tap

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-rendermode="windows" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-rendermode="windows" data-ej-target="menuitem" data-ej-showon="taphold">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" data-ej-rendermode="windows" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set showOn on initialization.
            // To set showOn API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", showOn: "taphold", renderMode: "windows" });
            });
        </script>

    showTitle Boolean

    Specifies to show the action sheet and popover menu title.

    Default Value:

    • true

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-showtitle="false">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", showTitle: false });
            });
        </script>

    target String

    Specifies the target element of the menu control.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set target element ID on initialization.
            // To set target element ID value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem" });
            });
        </script>

    templateId String

    Specifies ID of the element contains template contents.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-templateid="menuTemplate"></div>
        <div id="menuTemplate">
            <li>Get info</li>
            <li>Show in folder</li>
            <li>Delete</li>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu"></div>
        <div id="menuTemplate">
            <li>Get info</li>
            <li>Show in folder</li>
            <li>Delete</li>
        </div>
        <script>
            // Set templateId property on initialization.
            // To set templateId API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", templateId: "menuTemplate" });
            });
        </script>

    title String

    Specifies to customize the action sheet and popover title text.

    Default Value:

    • “title”

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-title="CustomTitle">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", title: "CustomTitle"});
            });
        </script>

    type Enum

    Specifies the type of the menu control. See ej.mobile.Menu.Type

    Default Value:

    • “actionsheet”.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-type="popover">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set type on initialization.
            // To set menu type API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", type: "popover" });
            });
        </script>

    width Int

    Specifies the width of the menu control.

    Default Value:

    • null

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-width=200>
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Set width on initialization.
            // To set width API value
            $(function () {
                $("#menu").ejmMenu({ target: "menuitem", width: 200 });
            });
        </script>

    Methods

    addItem()

    To add the menu item dynamically.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            $(function () {
                $("#menu").ejmMenu("addItem", "<li>Dynamic Item</li>");
            });
        </script>

    disable()

    To disable the menu.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Disable the menu control
            $(function () {
                $("#menu").ejmMenu("disable");
            });
        </script>

    disableCancelbutton()

    To disable the menu cancel button.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Disable the menu control
            $(function () {
                $("#menu").ejmMenu("disableCancelButton");
            });
        </script>

    disableItem()

    To disable the item in the given index.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Disable the given index menu item
            $(function () {
                $("#menu").ejmMenu("disableItem", "1");
            });
        </script>

    enable()

    To enable the menu.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // Enable the menu control
            $(function () {
                $("#menu").ejmMenu("enable");
            });
        </script>

    enableCancelbutton()

    To enable the menu cancel button.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Disable the menu control
            $(function () {
                $("#menu").ejmMenu("enableCancelButton");
            });
        </script>

    enableItem()

    To enable item in the given index.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // Enable the given index menu item
            $(function () {
                $("#menu").ejmMenu("enableItem", "1");
            });
        </script>

    hide()

    To hide the menu.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // Hide the menu which is already opened
            $(function () {
                $("#menu").ejmMenu("hide");
            });
        </script>

    removeItem()

    To remove item in the given index.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        // Create menu control
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // Remove the given index menu item
            $(function () {
                $("#menu").ejmMenu("removeItem", "1");
            });
        </script>

    show()

    To show the menu.

    Example

  • html
  • <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
    
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // Show/Open the menu which is in hide state.
            $(function () {
                $("#menu").ejmMenu("show");
            });
        </script>

    Events

    actionComplete

    Triggers when the AJAX requests complete. The request may get failed or succeed.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
      <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-actioncomplete="actionComplete" data-ej-datasource="window.listData" data-ej-fields-text="ContactName"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            // actionComplete event for menu
            function actionComplete(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    dataSource: window.listData,
                    fields: { text: "ContactName" },
                    actionComplete: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    actionFailure

    Triggers when the data requested from AJAX get failed.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
      <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-actionfailure="actionFailure" data-ej-datasource="window.listData" data-ej-fields-text="ContactName"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            // actionFailure event for menu
            function actionFailure(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    dataSource: window.listData,
                    fields: { text: "ContactName" },
                    actionFailure: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    actionSuccess

    Triggers after the data requested via AJAX is successfully loaded.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
      <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-actionsuccess="actionSuccess" data-ej-datasource="window.listData" data-ej-fields-text="ContactName"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            // actionSuccess event for menu
            function actionSuccess(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu"></div>
        <script>
            window.listData = ej.DataManager({
                url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Suppliers"
            });
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    dataSource: window.listData,
                    fields: { text: "ContactName" },
                    actionSuccess: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    hide

    Event triggers when the menu is hide.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-hide="hide">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // hide event for menu
            function hide(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // hide event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    hide: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    load

    Event triggers before the items loaded.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-load="load">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // load event for menu
            function load(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // load event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    load: function (args) {
                        //handle the event                    
                    }
                });
            });
        </script>

    loadComplete

    Event triggers after the items loaded.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-loadcomplete="loadComplete">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // loadComplete event for menu
            function loadComplete(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // loadComplete event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    loadComplete: function (args) {
                        //handle the event                    
                    }
                });
            });
        </script>

    show

    Event triggers when the menu is shown.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-show="show">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // show event for menu
            function show(args) {
                //handle the event
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // show event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    show: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    touchEnd

    Event triggers when touch end happens on the item.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    item Object Returns the current menu list element
    text string Returns the current menu list element associated text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-touchend="touchend">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // touchend event for menu
            function touchend(args) {
                //handle the event            
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
    
        <script>
            // touchend event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    touchEnd: function (args) {
                        //handle the event
                    }
                });
            });
        </script>

    touchStart

    Event triggers when touch start happens on the item.

    Name Type Description
    argument Object Event parameters from menu.

    Name Type Description
    cancel boolean Returns true if the event should be cancelled; otherwise, false.
    type string Returns the name of the event.
    model Object Returns the model value of the control.
    item Object Returns the current menu list element
    text string Returns the current menu list element associated text

    Example

  • html
  • <!-- Unobtrusive way of rendering -->
        <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu" data-role="ejmmenu" data-ej-target="menuitem" data-ej-touchstart="touchstart">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // touchStart event for menu
            function touchstart(args) {
                //handle the event           
            }
        </script>
  • html
  • <!-- Obtrusive way of rendering -->
    <div>
            <input id="menuitem" type="button" data-role="ejmbutton" data-ej-text="Menu" />
        </div>
        <div id="menu">
            <ul>
                <li data-ej-text="Get info"></li>
                <li data-ej-text="Show in folder"></li>
                <li data-ej-text="Delete"></li>
            </ul>
        </div>
        <script>
            // touchStart event for menu
            $(function () {
                $("#menu").ejmMenu({
                    target: "menuitem",
                    touchStart: function (args) {
                        //handle the event
                    }
                });
            });
        </script>