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 crearIgbMultiColumnComboBox eso mostrando datos en múltiples 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 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.

    <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

    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.

    Si el valor del componente necesita actualizarse programáticamente, elValueChanged evento debe gestionarse. LosGetValue métodos yGetValueAsync pueden usarse para obtener el valor cuando no están dentro delValueChanged gestor de eventos.

    <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

    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:

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

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

    <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