다중 선택

MultiSelect 개요

MultiSelect 컨트롤을 사용하여 사용자 지정 객체 또는 단순 문자열을 포함하는 드롭다운 목록에서 여러 항목을 선택할 수 있습니다.itemsSource 및 displayMemberPath을 포함한 모든 일반적인 속성은 ComboBox 컨트롤에서 확장합니다. ListBox 컨트롤과 마찬가지로 항목의 선택 여부를 결정하는 속성의 이름을 정의하는 checkedMemberPath 속성이 있습니다. 현재 체크된 항목(선택한 항목)은 checkedItems 속성을 사용하여 얻을 수 있습니다.

컨트롤 헤더는 완전히 사용자 정의할 수 있습니다. 기본적으로 최대 두 개의 항목을 표시하고 그 이후의 항목 수를 표시합니다. 이 동작은 다음 속성을 사용하여 사용자 정의할 수 있습니다.

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

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

예: 사용자 지정된 헤더가 있는 MultiSelect 컨트롤을 만들고 드롭다운 목록에 SelectAll 확인란을 표시합니다.

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

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

다중 자동완성

개요