[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

    Blazor Grid Column Chooser Overview

    A Grade de Dados do Ignite UI for Blazor dá suporte à capacidade de mostrar e ocultar colunas com a interface do usuário por meio do IgbDataGridToolbar componente ou pelo ColumnChooser componente que fornece flexibilidade para colocá-la em qualquer lugar da página. A IsHidden propriedade nas colunas também pode ser usada para ocultar ou mostrar rapidamente uma única coluna programaticamente para geração manual de colunas, e o valor de será refletido ColumnChooser​ ​IsHidden no componente. Cada abordagem pode ser usada de forma intercambiável para alterar o estado visível das colunas.

    Blazor Grid Column Chooser Example

    Toolbar's Column Chooser UI

    A interface do usuário do Seletor de Colunas pode ser acessada dentro do IgbDataGridToolbar componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da ColumnChooser barra de ferramentas como true. A barra de ferramentas exibirá um IgbButton, quando clicado, exibirá a interface do usuário do seletor de colunas. Este botão também exibe o total de colunas ocultas. Se a barra de ferramentas não for criada, habilitar a ColumnChooser propriedade não terá efeito e ocultará o botão.

    O IgbDataGridToolbar fornece propriedades adicionais, como adicionar um título à barra de ferramentas usando a ToolbarTitle propriedade, colocar texto IgbButton na configuração ColumnChooserText da propriedade e adicionar um cabeçalho de título à interface do usuário do seletor de colunas por configuração ColumnChooserTitle.

    The Column Chooser can be configured with animations by setting the grid's ColumnHidingAnimationMode and ColumnShowingAnimationMode properties.

    Code Snippet

    The following demonstrates how to implement the Column Chooser Toolbar UI for the Blazor Data Grid:

    <IgbDataGridToolbar ToolbarTitle="Grid Title"
    ColumnChooser="true"
    ColumnChooserText="Columns"
    ColumnChooserTitle="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft">
</IgbDataGrid>

@code {
    private DataGrid grid;
    public DataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}

    Simple Column Chooser

    Digamos que queremos exibir manualmente a interface do ColumnChooser usuário sem a barra de ferramentas e colocá-la em qualquer lugar que quisermos em nossa página. Isso pode ser feito facilmente simplesmente criando uma instância do componente em nossa marcação.

    Demo

    Code Snippet

    A seguir, demonstramos como implementar a interface do usuário do seletor de colunas para a grade de dados:

    <IgbColumnChooser Height="100%" Width="200px"
    Title="Column Chooser"
    TargetGrid="DataGridRef" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource"
    ColumnHidingAnimationMode="ColumnHidingAnimationMode.SlideToLeft" />

@code {
    private IgbDataGrid grid;
    public IgbDataGrid DataGridRef
    {
        get
        {
            return grid;
        }
        set
        {
            grid = value;
            StateHasChanged();
        }
    }
}

    API References