[!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 Pinning Overview

    O Ignite UI for Blazor Data Grid dá suporte à capacidade de fixar colunas, permitindo que os usuários finais bloqueiem uma coluna em uma ordem de coluna específica.

    Uma coluna ou várias colunas podem ser fixadas no lado esquerdo ou direito da Grade de Dados. Além disso, você pode alterar o estado do pino das colunas utilizando a PinColumn função.

    Blazor Grid Column Pinning Example

    A API de fixação de coluna na grade de dados pode ser ativada definindo a propriedade de Pinned uma coluna ou ao defini-la utilizando a PinColumn função da grade.

    A Pinned propriedade tem três opções:

    • Esquerda - a ativação Left posicionará as colunas fixadas no lado esquerdo da grade.
    • Direita - habilitar Right posicionará as colunas fixadas no lado direito da grade.
    • Nenhum - habilitar None desafixará uma coluna e reposicionará seu posicionamento padrão na grade.

    As colunas não afixadas adjacentes às colunas fixadas ainda manterão a rolagem horizontal.

    A PinColumn função contém dois parâmetros obrigatórios. O primeiro parâmetro é a coluna a ser fixada e o segundo é com a configuração de PinnedPositions enumeração.

    Code Snippet

    O código a seguir demonstra como implementar a fixação de coluna na Grade de Dados do Blazor com fixação de coluna usando o método Pinned propriedade e PinColumn função:

    <IgbDataGrid Height="100%" Width="100%"
    DefaultColumnMinWidth="120"
    DataSource="@DataSource"
    AutoGenerateColumns="false"
    @ref="DataGridRef">

    @*Columns Pinned Left*@
    <IgbTextColumn Field="ID" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="FirstName" Pinned="PinnedPositions.Left" />
    <IgbTextColumn Field="LastName" Pinned="PinnedPositions.Left" />

    @*Columns Unpinned*@
    <IgbDateTimeColumn Field="Birthday" Pinned="PinnedPositions.None" />
    <IgbNumericColumn Field="Age" Pinned="PinnedPositions.None" />
    <IgbImageColumn Field="CountryFlag" Pinned="PinnedPositions.None" />

    @*Columns Pinned Right*@
    <IgbTextColumn Field="Street" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="City" Pinned="PinnedPositions.Right" />
    <IgbTextColumn Field="Country" Pinned="PinnedPositions.Right" />
</IgbDataGrid>

    Toolbar's Column Pinning UI

    A interface do usuário de fixação de coluna pode ser acessada dentro do IgbDataGridToolbar componente separado da grade. Para isso, tudo o que precisamos fazer é definir a propriedade da columnPinning barra de ferramentas como true. A barra de ferramentas exibirá um IgbButton, quando clicado, exibirá a interface do usuário de fixação de coluna. Esse botão também exibe o total de colunas fixadas à esquerda. Se a barra de ferramentas não for criada, habilitar a columnPinning 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 na IgbButton configuração columnPinningText da propriedade e adicionar um cabeçalho de título à configuração da interface do usuário columnPinningTitle oculta da coluna.

    Demo

    Code Snippet

    <IgbDataGridToolbar TargetGrid="DataGridRef"
    ToolbarTitle="Grid Toolbar Title"
    ColumnPinning="true"
    ColumnPinningText="Pinning"
    ColumnPinningTitle="Column Pinning" />
<IgbDataGrid Height="100%" Width="100%"
    @ref="DataGridRef"
    DataSource="DataSource" />

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

    API References