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

    Este ejemplo demuestra cómo crearIgcMultiColumnComboBoxComponent eso mostrando datos en múltiples 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-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

    Para mostrar tus objetos en el componente Multi-Column Combo Box, tendrás que asignar laDataSource propiedad. Esto puede estar acotado en forma de un array de objetos complejos. El siguiente código demuestra cómo vincular la propiedad de la fuente 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

    Puedes configurar diferentes propiedades de los Cuadros Combinados Multicolumna paraDataSource que actúen como texto de pantalla para el control, así como como valor subyacente cuando se realiza una selección. Esto se hace estableciendo lastextField propiedades yvalueField del control, respectivamente, como el nombre de la propiedad en el elemento de datos que quieres representar para 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

    Por defecto, el Multi-Column Combo Box mostrará todas las propiedades del dato subyacente, pero esto puede controlarse configurando lafields propiedad en el componente. Esta propiedad toma unastring[] de rutas de propiedad sobre el elemento de datos subyacente para determinar cuáles 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 aparece como marcador de posición para cuando no hay selección en el componente Multi-Column Combo Box. Esto se hace configurando laplaceholder propiedad a la cadena que quieres 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 de Combo Multicolumna haciendo clic en la cabecera de la columna en el desplegable. La forma en que se configura la ordenación también puede modificarse, ya que las columnas pueden ordenarse solo por una sola columna o por varias columnas, y pueden limitarse a ascendentes y descendentes, o a tri-estados. Esto se hace estableciendo lasortMode propiedad 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