Menu

The Menu control extends the ComboBox control to provide a simple drop-down list with clickable items.

The header property determines the text shown on the menu, and the itemsSource property defines the items shown in the drop-down, the same as it does in the ComboBox.

The Menu control provides three methods for handling user choices: you can handle the itemClicked event, attach a command to each menu choice, or bind the selectedValue property and use it as a simple value picker. See each method demonstrated below.

These samples use the WjMenu component and Angular 2.

Handling choices with the itemClicked event

When the user selects an item from the menu, the control raises the itemClicked event. You can handle this event to inspect the menu's selectedIndex property to determine which item was clicked and take an appropriate action.

The three menus below use this method to call a menuItemClicked method in the controller. The method inspects the selected item and displays an alert.

New
create a new document
Open
load an existing document from a file
Save
save the current document to a file
Exit
save changes and exit the application
Cut
move the current selection to the clipboard
Copy
copy the current selection to the clipboard
Paste
insert the clipboard content at the cursor position
Find
search the current document for some text
Replace
replace occurrences of a string in the current document
Bold Italic Underline     Red     Green     Blue

Handling choices with item commands

The Menu control also supports commands, which makes it easier to use the MVVM pattern. Commands are objects that implement two methods:

The menu below has items bound to a command in the controller. We implement the command as follows:

this.changeValueCommand = {
    executeCommand: (parm) => {
        if (wijmo.isNumber(parm)) {
            this.passengers += parm;
        } else {
            this.passengers = 1; // reset
        }
    },
    canExecuteCommand: (parm) => {
        if (wijmo.isNumber(parm)) {
            var val = this.passengers + parm;
            return val >= 0 && val <= 100;
        }
        return true;
    }
}

The executeCommand method increments a variable in the model by an amount passed in as a parameter. The use of parameters makes commands flexible, so that menu options that increment or decrement the variable by different amounts can use the same command.

The canExecuteCommand method checks whether adding the specified amount to the variable would violate the range constraint (the variable is supposed to be between zero and 100). If the command is invalid, the corresponding menu options become disabled.

This is a typical MVVM-style implementation. The logic stays in the controller, and the view determines which elements invoke the command, and with which parameters.

Value (0 to 100)

Change value
Increment by 50 Increment by 10 Increment by 5 Decrement by 5 Decrement by 10 Decrement by 50 Reset


Binding menu options to values (ValuePicker)

The Menu control can also be used as a simple value picker. It extends the ComboBox control, which allows you to bind scope variables to the control's selectedValue property as you would with a ComboBox.

The menu below allows users to pick a sales tax value from a pre-defined list. The markup is as follows:

<wj-menu [header]="'Tax'" [(value)]="tax">
  <wj-menu-item [value]="0">Exempt</wj-menu-item>
  <wj-menu-item [value]=".05">5%</wj-menu-item>
  ...
  <wj-menu-item [value]=".15">15%</wj-menu-item>
  </wj-menu>
Exempt 5% 8.5% 9% 10% 12% 15%

Using menus as buttons (SplitButton)

Split Buttons allow users to select a value by clicking a primary button, or select from a list of mutually exclusive values displayed in a drop-down list.

To use Wijmo menu controls as split buttons, all you have to do is set the isButton property to true. Once you do that, clicking the menu header will raise the itemClicked event instead of showing the drop-down list of commands. Of course, users can still open the drop-down by clicking the drop-down button next to the menu header.

The menu below was configured to act as a split button. The markup is as follows:

<wj-menu #menu4
             [header]="'Run'"
             [value]="browser"
             [isButton]="true"
             (itemClicked)="splitButtonItemClicked(menu4, $event)">
    <wj-menu-item [value]="'IE'">Internet Explorer</wj-menu-item>
    <wj-menu-item [value]="'Chrome'">Chrome</wj-menu-item>
    <wj-menu-item [value]="'FF'">FireFox</wj-menu-item>
    <wj-menu-item [value]="'Safari'">Safari</wj-menu-item>
    <wj-menu-item [value]="'Opera'">Opera</wj-menu-item>
</wj-menu>

In most cases, the handler for the menu's menuItemClicked event will perform the same action regardless of whether the user clicked the button or selected an item from the drop-down list. But that is not always the case. In this example, we decided to change the default browser when users select items from the drop-down list, and to run the selected browser when users click the button. This was done by checking the value of the menu's isDroppedDown property in the menuItemClicked event handler:

// handle clicks on the split button
// uses the isDroppedDown property to check whether the event was triggered
// by selecting an item from the drop-down or by clicking the button
splitButtonItemClicked(sender: wijmo.input.Menu, args) {
    var menu = sender;
    if (menu.isDroppedDown) {
        // the click was on a menu item
        alert('option **' + menu.selectedItem.value + '** is now the default');
    } else {
        // the click was on the button
        alert('running **' + menu.selectedItem.value + '**');
    }
}

Internet Explorer Chrome FireFox Safari Opera

Context Menus

Context menus (also called contextual, shortcut, and popup or pop-up menu) are menus that appear upon user interaction, typically a right-click, and display commands that apply to the object that was clicked.

You can use any regular Wijmo Menu as a context menu by following these steps:

  1. Define the menu using the regular markup as shown above, and add a template variable to the menu element (e.g. #ctxMenu).
  2. Hide the menu by adding a style="display:none" attribute.
  3. Add the "wj-context-menu" attribute to the elements that should receive the context menu, and assign it with the template variable that defines the original menu (e.g. [wjContextMenu]="ctxMenu").

For example, the three elements below share a common context menu:

I have a Context Menu.
I have the same Context Menu.
You guessed it, me too.
Cut
Moves the current selection to the clipboard.
Copy
Copies the current selection to the clipboard.
Paste
Inserts the clipboard content at the cursor position.
Find
Searches for the text in the current document.
Replace
Replaces occurances of the specified string in the current document.


Menu item content with expressions and directives

The wj-menu-item directive may contain arbitrary HTML fragment with Angular 2 interpolation expressions, directives and components. You can also use ngFor and ngIf directives to populate the items in the Menu control.

{{palette.name}}


Data bound Menu with item template

A template element with wjItemTemplate directive can be used to add a template in a data-bound Menu control. The template may contain an arbitrary HTML fragment with Angular 2 expressions, directives and components.

{{itemIndex + 1}}. {{item.name}}