[]
        
(Showing Draft Content)

값 선택기(Value Picker)로서의 메뉴(Menu)

Menu 컨트롤을 단순 값 선택기로 사용할 수 있습니다. ComboBox 컨트롤을 확장하여, ComboBox에서와 같이 컨트롤의 selectedValue 속성에 변수를 바인딩할 수 있습니다.

예시: selectedIndexChanged 이벤트를 사용하여 메뉴의 헤더를 업데이트하고 현재 값을 표시합니다:

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
    });
}