Web Components Multi-Columns Combo Box 개요

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

    Web Components Multi-Column Combo Box Example

    This sample demonstrates how to create IgcMultiColumnComboBoxComponent that displays data in multiple columns in a popup window.

    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

    In order to display your objects in the Multi-Column Combo Box component, you will need to bind the DataSource property. This can be bound in the form of an array of complex objects. The following code demonstrates how to bind the data source property.

    아래 코드 조각에서 "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

    You can configure different properties of the Multi-Column Combo Box's bound DataSource to act as the display text for the control as well as the underlying value when a selection is made. This is done by setting the textField and valueField properties of the control, respectively, to the name of the property on the data item that you want to represent these things.

    다음 코드 조각은 기본 데이터 항목에 "국가" 및 "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

    By default, the Multi-Column Combo Box will show all of the properties on the underlying data item, but this can be controlled by setting the fields property on the component. This property takes a string[] of property paths on the underlying data item to determine which properties are shown.

    다음 코드 조각은 이를 설정하는 방법을 보여 주며 결과 드롭다운에는 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

    It is possible to configure the text that shows as a placeholder for when there is no selection in the Multi-Column Combo Box component. This is done by setting the placeholder property to the string you would like to be displayed. The following code demonstrates how to set this:

    <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

    The user has the ability to sort the columns that are displayed in the Multi-Column Combo Box by clicking the header of the column in the drop-down. The way the sorting is configured can be modified as well, as the columns can be sorted by only a single column or multiple columns, and they can be limited to either ascending and descending, or they can be tri-state. This is done by setting the sortMode property of the component.

    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