5.20231.904
5.20231.904

Menu Overview

The Menu control displays a text element with a drop-down list of commands that the user can invoke by a click or touch. As the control is inherited from ComboBox, you can use the ItemsSource property to populate and style the control, just like you do in the ComboBox control. In addition to the ComboBox control, the Menu control fires an ItemClicked event when the user selects an item from the menu. The event handler can inspect the menu's selectedItem property to determine which item was clicked and takes the appropriate action.

Menu

The example below demonstrates how to create a Menu control and handle the itemClicked event.

HTML
 <div style="margin:10px;" id="menuFile">
  File
  <div>
    <span class="glyphicon glyphicon-asterisk"></span>&nbsp;&nbsp;
    <b>New</b>
    <br>
    <small><i>create a new file</i></small></div>
  <div>
    <span class="glyphicon glyphicon-folder-open"></span>&nbsp;&nbsp;
    <b>Open</b>
    <br>
    <small><i>open an existing file or folder</i></small></div>
  <div>
    <span class="glyphicon glyphicon-floppy-disk"></span>&nbsp;&nbsp;
    <b>Save</b>
    <br>
    <small><i>save the current file</i></small></div>
  <div class="wj-separator"></div>
  <div>
    <span class="glyphicon glyphicon-remove"></span>&nbsp;&nbsp;
    <b>Exit</b>
    <br>
    <small><i>exit the application</i></small>
  </div>
</div>
Javascript
import * as input from '@grapecity/wijmo.input';

function init() {
    // create file and edit menus
    let menuFile = createMenu('menuFile');
    menuFile.itemClicked.addHandler(menuClick);

    let menuEdit = createMenu('menuEdit');
    menuEdit.itemClicked.addHandler(menuClick);

    // use the same event handler for both
    function menuClick(sender) {
        alert(`You selected option **${sender.selectedIndex}** from menu **${sender.header}**`);
    }

    // create menu from markup
    function createMenu(elementId) {
        // get host element, header, items
        let host = document.getElementById(elementId), header = host.firstChild.textContent.trim(), items = host.querySelectorAll('div'), menuItems = [];

        for (let i = 0; i < items.length; i++) {
            let item = items[i];
            menuItems.push(item.outerHTML);
        }

        // clear host and instantiate menu
        host.innerHTML = '';
        let menu = new input.Menu(host, {
            header: header,
            itemsSource: menuItems
        });

        // done, return menu
        return menu;
    }
}