Web Components Multi-Columns Combo Box 개요

    다중 열 콤보 상자는 데이터 개체의 속성에 대한 열을 자동으로 생성합니다. 이 구성 요소는 드롭다운에 포함된 데이터 그리드와 유사하게 대량의 데이터를 시각화하는 콤보 상자라는 점에서 독특합니다.

    Web Components Multi-Column Combo Box Example

    이 샘플은 팝업 창에서 여러 열로 데이터를 표시하는 방법을IgcMultiColumnComboBoxComponent 보여줍니다.

    Dependencies

    차트 구성 요소를 설치할 때 핵심 패키지도 설치해야 합니다.

    npm install --save igniteui-webcomponents-core
npm install --save igniteui-webcomponents-data-grids
npm install --save igniteui-webcomponents-inputs
npm install --save igniteui-webcomponents-layouts

    Component Modules

    다중 열 콤보 상자에는 다음 모듈이 필요합니다.

    import { IgcMultiColumnComboBoxModule } from 'igniteui-webcomponents-data-grids';
import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-data-grids';

ModuleManager.register(
    IgcMultiColumnComboBoxModule
);

    Usage

    Binding a Data Source

    다중 열 콤보 박스 컴포넌트에 객체를 표시하려면 속성을 바인딩DataSource 해야 합니다. 이것은 복잡한 객체들의 배열 형태로 결합될 수 있습니다. 다음 코드는 데이터 소스 속성을 바인딩하는 방법을 보여줍니다.

    아래 코드 조각에서 "countryNames" 컬렉션은 사용자 정의 개체로 가득 찬 any[]입니다.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
}

    Setting Display Value and Data Value

    멀티 컬럼 콤보 박스의 바운DataSource 딩은 컨트롤의 표시 텍스트 역할뿐만 아니라 선택 시 기본 값으로도 다양한 속성을 설정할 수 있습니다. 이는 컨트롤의 속성textField과 속성을 각각 표현하려는 데이터 항목의 속성 이름으로 설정valueField 함으로써 이루어집니다.

    다음 코드 조각은 기본 데이터 항목에 "국가" 및 "ID" 속성이 있는 경우 이러한 속성을 설정하는 방법을 보여줍니다.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.textField = "Country";
    multiColumnComboBox.valueField = ["ID"];
}

    Setting Fields

    기본적으로 다중 열 콤보 박스는 기본 데이터 항목의 모든 속성을 보여주지만, 이는 컴포넌트에 속성을 설정fields 하여 제어할 수 있습니다. 이 속성은 기본 데이터 항목에 대한 속성 경로 중 하나를string[] 사용하여 어떤 속성이 표시될지 결정합니다.

    다음 코드 조각은 이를 설정하는 방법을 보여 주며 결과 드롭다운에는 ID 및 국가 열만 표시됩니다.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.fields = ["ID", "Country"];
}

    Setting Placeholder Text

    다중 열 콤보 박스 컴포넌트에 선택이 없을 때 표시되는 텍스트를 자리 표시자로 설정할 수 있습니다. 이는 표시하고자 하는 문자열에 속성을 설정placeholder 함으로써 이루어집니다. 다음 코드는 이를 설정하는 방법을 보여줍니다:

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.placeholder = "Please choose a country";
}

    Configuring Sorting Mode

    사용자는 드롭다운에서 열의 헤더를 클릭하여 다중 열 콤보 박스에 표시되는 열을 정렬할 수 있습니다. 정렬 방식도 수정할 수 있는데, 열은 한 개의 열로만 정렬할 수 있고, 여러 열로 정렬할 수 있으며, 상승 및 하강 또는 삼중 상태로 제한될 수 있습니다. 이는 컴포넌트의 속성을 설정sortMode 함으로써 이루어집니다.

    TriState 정렬 옵션을 사용하면 정렬된 열을 정렬 해제할 수 있습니다.

    다음 코드는 다중 열 3상태별로 정렬할 수 있도록 다중 열 콤보 상자를 설정하는 방법을 보여줍니다.

    <igc-multi-column-combo-box id="comboBox" height="50px" width="400px">
</igc-multi-column-combo-box>

    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState;
}

    API References