Visão geral da caixa de combinação multicoluna Blazor

    O Multi-Column Combo Box gera colunas automaticamente para propriedades no objeto de dados. Este componente é único no sentido de que é um combo box que visualiza grandes quantidades de dados, semelhante a uma grade de dados incorporada no menu suspenso.

    Blazor Multi-Column Combo Box Example

    Este exemplo demonstra como criar IgbMultiColumnComboBox que exibe dados em várias colunas em uma janela pop-up.

    Component Modules

    A caixa de combinação com várias colunas requer os seguintes módulos:

    // in Program.cs file

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

    Usage

    Binding a Data Source

    Para exibir seus objetos no componente Multi-Column Combo Box, você precisará vincular a propriedade DataSource. Isso pode ser vinculado na forma de uma matriz de objetos complexos. O código a seguir demonstra como vincular a propriedade data source.

    <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

    Você pode configurar diferentes propriedades do DataSource vinculado do Multi-Column Combo Box para atuar como texto de exibição para o controle, bem como o valor subjacente quando uma seleção é feita. Isso é feito definindo as propriedades TextField e ValueField do controle, respectivamente, para o nome da propriedade no item de dados que você deseja que represente essas coisas.

    Se o valor do componente precisar ser atualizado programaticamente, o evento ValueChanged precisa ser manipulado. Os métodos GetValue e GetValueAsync podem ser usados para obter o valor quando não estiver dentro do manipulador 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

    Por padrão, a Multi-Column Combo Box mostrará todas as propriedades no item de dados subjacente, mas isso pode ser controlado definindo a propriedade Fields no componente. Essa propriedade pega uma string[] de caminhos de propriedade no item de dados subjacente para determinar quais propriedades são mostradas.

    O trecho de código a seguir mostra como definir isso, e o menu suspenso resultante mostraria apenas as colunas ID e 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

    É possível configurar o texto que é exibido como um placeholder para quando não há seleção no componente Multi-Column Combo Box. Isso é feito definindo a propriedade Placeholder para a string que você gostaria que fosse exibida. O código a seguir demonstra como definir isso:

    <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

    O usuário tem a capacidade de classificar as colunas que são exibidas na Multi-Column Combo Box clicando no cabeçalho da coluna no menu suspenso. A maneira como a classificação é configurada também pode ser modificada, pois as colunas podem ser classificadas por apenas uma coluna ou várias colunas, e podem ser limitadas a ascendente e descendente, ou podem ser tri-state. Isso é feito definindo a propriedade SortMode do componente.

    Observe que as opções de classificação do TriState permitirão que colunas classificadas sejam desclassificadas.

    O código a seguir demonstra como configurar a Caixa de Combinação de Várias Colunas para poder classificar por três estados de várias colunas.

    <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