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 Ejemplo de cuadro combinado de varias columnas

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

    EXAMPLE
    DATA
    TS
    HTML
    CSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    dependencias

    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
cmd
    Ignite UI for Web Components | CTA Banner

    Módulos de componentes

    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
);
ts

    Uso

    Vincular una fuente de datos

    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>
html
    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
}
ts

    Configuración del valor de visualización y el valor de datos

    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>
html
    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.textField = "Country";
    multiColumnComboBox.valueField = ["ID"];
}
ts

    Configuración de campos

    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>
html
    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.fields = ["ID", "Country"];
}
ts

    Configuración del texto del marcador de posición

    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>
html
    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.placeholder = "Please choose a country";
}
ts

    Configurar el modo de clasificación

    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>
html
    constructor() {
    let multiColumnComboBox = document.getElementById("comboBox") as IgcMultiColumnComboBoxComponent;
    multiColumnComboBox.dataSource = countryNames;
    multiColumnComboBox.sortMode = SortMode.SortByMultipleColumnsTriState;
}
ts

    Referencias de API