Web Components Descripción general del cuadro combinado de varias columnas

    El cuadro combinado de varias columnas genera automáticamente columnas para las propiedades del objeto de datos. Este componente es único porque es un cuadro combinado que visualiza grandes cantidades de datos similar a una cuadrícula de datos incrustada en el menú desplegable.

    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

    Al instalar el componente de gráficos, también se debe instalar el paquete principal.

    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

    El cuadro combinado de varias columnas requiere los siguientes módulos:

    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.

    En el siguiente fragmento de código, la colección "countryNames" es un any[] lleno de objetos personalizados.

    <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.

    El siguiente fragmento de código muestra cómo configurar estas propiedades, dado que el elemento de datos subyacente tiene una propiedad "País" y "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.

    El siguiente fragmento de código muestra cómo configurar esto y el menú desplegable resultante solo mostrará las columnas ID y País:

    <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.

    Tenga en cuenta que las opciones de clasificación TriState permitirán que las columnas ordenadas no estén ordenadas.

    El siguiente código demuestra cómo configurar el cuadro combinado de varias columnas para poder ordenar por varias columnas de tres estados.

    <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