그룹화

그룹화

ComboBox 컨트롤은 showGroups 속성을 통한 항목 그룹화를 지원합니다. showGroups 속성을 true로 설정하고 항목에서 itemsSource 컬렉션에 있는 그룹화를 활성화하여 그룹 헤더 항목을 추가할 수 있습니다.

그러나 이러한 헤더 항목은 단순한 표시에 불과합니다. 즉, 마우스나 키보드를 사용하여 선택할 수 없으며 데이터 항목에 바인딩되지 않습니다.

다음 예제에서는 그룹이 있는 콤보 상자를 보여 줍니다.

  <div id="theComboBox"></div>

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

function init() {
    // get grouped CollectionView
    let data = getData();

    // show in ComboBox
    let theComboBox = new input.ComboBox('#theComboBox', {
        showGroups: true,
        displayMemberPath: 'city',
        itemsSource: data,
        selectedIndexChanged: (sender) => {
            console.log('selectedIndexChanged', sender.selectedIndex, sender.selectedItem.city);
        }
    });

}
function getData() {
    var arr = [];

    addCities(arr, 'US', ['New York', 'Los Angeles', 'Chicago', 'Houston']);
    addCities(arr, 'Japan', ['Tokyo', 'Osaka', 'Kyoto', 'Sendai']);
    addCities(arr, 'UK', ['London', 'Birmingham', 'Manchester', 'Liverpool']);
    addCities(arr, 'China', ['Shanghai', 'Beijing', 'Tianjin', 'Shenzhen']);
    addCities(arr, 'Germany', ['Berlin', 'Hamburg', 'Munich', 'Cologne']);
    addCities(arr, 'France', ['Paris', 'Marseille', 'Lyon', 'Toulouse']);
    addCities(arr, 'Canada', ['Toronto', 'Ottawa', 'Vancouver', 'Montreal']);
    addCities(arr, 'Russia', ['Moscow', 'St Petersburg', 'Novosibirsk', 'Yekaterinburg']);

    return new wijmo.CollectionView(arr, {
        sortDescriptions: ['country', 'city'],
        groupDescriptions: ['country'],
        currentItem: null
    });
}