Menu as Value Picker

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

Example: It uses the selectedIndexChanged event to update the Menu's header and show the current value:

HTML

<div id="valuePicker"></div>

Javascript

import * as input from '@grapecity/wijmo.input';

function init() {
    let valuePicker = new input.Menu('#valuePicker', {
        // update header to show current selection
        selectedIndexChanged: (sender) => {
            if (sender.selectedIndex > -1) {
                sender.header = `Tax: <b>${sender.selectedItem.header}</b>`;
            }
        },
        //
        // populate menu after hooking up the selectedIndexChanged event
        displayMemberPath: 'header',
        selectedValuePath: 'value',
        itemsSource: [
            { header: 'Exempt', value: 0 },
            { header: '1%', value: 0.01 },
            { header: '5%', value: 0.05 },
            { header: '8.5%', value: 0.085 },
            { header: '10%', value: 0.10 },
            { header: '20%', value: 0.20 }
        ],
        selectedValue: 0.085
    });
}