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

    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

    Este ejemplo demuestra cómo crear IgcMultiColumnComboBoxComponent que muestra datos en varias columnas en una ventana emergente.

    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-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-grids';
import { IgcMultiColumnComboBoxComponent } from 'igniteui-webcomponents-grids';

ModuleManager.register(
    IgcMultiColumnComboBoxModule
);

    Usage

    Binding a Data Source

    Para mostrar sus objetos en el componente Cuadro combinado de varias columnas, deberá vincular la propiedad DataSource. Esto se puede vincular en forma de una matriz de objetos complejos. El siguiente código demuestra cómo vincular la propiedad de origen de datos.

    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

    Puede configurar diferentes propiedades del DataSource vinculado del cuadro combinado de varias columnas para que actúe como texto de visualización para el control, así como como valor subyacente cuando se realiza una selección. Esto se hace configurando las propiedades textField y valueField del control, respectivamente, con el nombre de la propiedad en el elemento de datos que desea representar estas cosas.

    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

    De forma predeterminada, el cuadro combinado de varias columnas mostrará todas las propiedades del elemento de datos subyacente, pero esto se puede controlar configurando la propiedad de fields en el componente. Esta propiedad toma una string[] de rutas de propiedad en el elemento de datos subyacente para determinar qué propiedades se muestran.

    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

    Es posible configurar el texto que se muestra como marcador de posición para cuando no hay selección en el componente Cuadro combinado de varias columnas. Esto se hace estableciendo la propiedad placeholder en la cadena que desea que se muestre. El siguiente código demuestra cómo configurar esto:

    <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

    El usuario tiene la capacidad de ordenar las columnas que se muestran en el cuadro combinado de varias columnas haciendo clic en el encabezado de la columna en el menú desplegable. La forma en que se configura la clasificación también se puede modificar, ya que las columnas se pueden ordenar por una sola columna o por varias columnas, y se pueden limitar a ascendentes y descendentes, o pueden ser de tres estados. Esto se hace estableciendo la propiedad sortMode del componente.

    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