MultiSelect 개요

MultiSelect 컨트롤을 통해 사용자 지정 객체 또는 간단한 문자열이 포함된 드롭다운 목록에서 여러 항목을 선택할 수 있습니다. itemsSource 와 __displayMemberPath__를 포함한 모든 일반 속성으로 ComboBox 컨트롤을 확장합니다.

ListBox 컨트롤과 마찬가지로, 이 컨트롤에는 항목의 체크 여부를 결정하는 속성의 이름을 정의하는 checkedMemberPath 속성이 있습니다. 현재 체크된(선택된) 항목은 checkedItems 속성을 통해 얻을 수 있습니다.

컨트롤 헤더는 모두 사용자 정의할 수 있습니다. 기본적으로, 최대 두 개의 선택된 항목과 그 이후의 항목 수가 표시됩니다. 이 동작은 다음 속성을 사용하여 사용자 정의할 수 있습니다:

1. maxHeaderItems: 컨트롤 헤더에 표시할 최대 항목 수를 변경할 수 있습니다.
2. placeholder: 선택된 항목이 없을 때 표시되는 메시지를 변경합니다.
3. headerFormat: 항목 수를 표시하는 데 사용되는 양식 문자열을 변경합니다.
4. headerFormatter: 어플리케이션의 필요 기준에 따라 헤더 콘텐츠를 생성하는 함수입니다.

또한 showSelectAllCheckbox 속성을 true로 설정하여, 드롭다운 목록 상단에 SelectAll 옵션을 표시하여 한 번의 클릭으로 모든 항목을 선택/선택 취소할 수 있습니다.

예시: 사용자 정의된 헤더를 사용하여 MultiSelect 컨트롤을 만들고 드롭다운 목록에 SelectAll 체크박스를 표시합니다:

HTML

 <div id="theMultiSelect"></div>

Javascript

import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {
    let theMultiSelect = new input.MultiSelect('#theMultiSelect', {
        placeholder: 'Countries',
        headerFormat: '{count:n0} countries',
        displayMemberPath: 'country',
        itemsSource: getData()
    });
}