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.
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.
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.
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>
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 + '**'); } }
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:
For example, the three elements below share a common context menu:
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.
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.