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.

    Blazor Multi-Column Combo Box Example

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

    Component Modules

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

    // in Program.cs file

builder.Services.AddIgniteUIBlazor(
    typeof(IgbMultiColumnComboBoxModule));

    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.

    <IgbMultiColumnComboBox Height="50px" Width="400px" DataSource="CountryNames" />

@code {
    protected List<CountryInfo> CountryNames;

    protected override void OnInitialized()
    {
        this.CountryNames = CountryTreeData.Create();
    }
}

    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 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();
    }
}

    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 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();
    }
}

    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:

    <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();
    }
}

    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 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();
    }
}

    API References