Descripción general del cuadro combinado de varias columnas Blazor

    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.

    Ejemplo de cuadro combinado de varias columnas Blazor

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

    EXAMPLE
    MODULES
    DATA
    RAZOR
    CSS

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

    Módulos de componentes

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

    // in Program.cs file
    
    builder.Services.AddIgniteUIBlazor(
        typeof(IgbMultiColumnComboBoxModule));
    razor

    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.

    <IgbMultiColumnComboBox Height="50px" Width="400px" DataSource="CountryNames" />
    
    @code {
        protected List<CountryInfo> CountryNames;
    
        protected override void OnInitialized()
        {
            this.CountryNames = CountryTreeData.Create();
        }
    }
    razor

    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 estableciendo las propiedades TextField y ValueField del control, respectivamente, con el nombre de la propiedad en el elemento de datos que desea representar estas cosas.

    Si es necesario actualizar el valor del componente mediante programación, se debe controlar el evento ValueChanged. Los métodos GetValue y GetValueAsync se pueden usar para obtener el valor cuando no está dentro del controlador de eventos ValueChanged.

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                         DataSource="CountryNames"
                         TextField="Country"
                         ValueField="@(new string[]{ "ID" })" />
    
    @code {
        protected List<CountryInfo> CountryNames;
    
        protected override void OnInitialized()
        {
            this.CountryNames = CountryTreeData.Create();
        }
    }
    razor

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

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                         DataSource="CountryNames"
                         Fields="@(new string[] { "ID", "Country" })" />
    
    @code {
        protected List<CountryInfo> CountryNames;
    
        protected override void OnInitialized()
        {
            this.CountryNames = CountryTreeData.Create();
        }
    }
    razor

    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:

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                         DataSource="CountryNames"
                         Placeholder="Please choose a country" />
    
    @code {
        protected List<CountryInfo> CountryNames;
    
        protected override void OnInitialized()
        {
            this.CountryNames = CountryTreeData.Create();
        }
    }
    razor

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

    <IgbMultiColumnComboBox Height="50px" Width="400px"
                         DataSource="CountryNames"
                         SortMode="SortMode.SortByMultipleColumnsTriState" />
    
    @code {
        protected List<CountryInfo> CountryNames;
    
        protected override void OnInitialized()
        {
            this.CountryNames = CountryTreeData.Create();
        }
    }
    razor

    Referencias de API