Fixação de coluna da grade Blazor

    O recurso Ignite UI for Blazor Column Pinning no Blazor Grid permite que os desenvolvedores bloqueiem colunas específicas em uma ordem desejada, garantindo visibilidade o tempo todo, mesmo quando os usuários rolam horizontalmente pelo IgbGrid. Há uma UI integrada para Column Pinning, acessível pela barra de ferramentas Blazor Grid. Além disso, os desenvolvedores têm a flexibilidade de criar uma interface de usuário personalizada que altera o estado de pin das colunas.

    Blazor Grid Column Pinning Example

    Este exemplo demonstra como você pode fixar uma coluna ou várias colunas no lado esquerdo ou direito do IgbGrid.

    Column Pinning API

    A fixação de colunas é controlada pela propriedade Pinned do IgbColumn. Colunas fixadas são renderizadas no lado esquerdo do IgbGrid por padrão e permanecem fixas por meio da rolagem horizontal das colunas não fixadas no corpo do IgbGrid.

    <IgbGrid Data=data AutoGenerate=false>
    <IgbColumn Field="Name" Pinned=true></IgbColumn>
    <IgbColumn Field="AthleteNumber"></IgbColumn>
    <IgbColumn Field="TrackProgress"></IgbColumn>
</IgbGrid>

    Você também pode usar os métodos PinColumn ou UnpinColumn do IgbGrid para fixar ou desafixar colunas pelo nome IgbGrid campo:

    @code {
    grid.PinColumn("AthleteNumber", 0);
    grid.UnpinColumn("Name", 0);
}

    Ambos os métodos retornam um valor booleano indicando se sua respectiva operação foi bem-sucedida ou não. Normalmente, o motivo pelo qual eles falham é que a coluna já está no estado desejado.

    Uma coluna é fixada à direita da coluna fixada mais à direita. Alterar a ordem das colunas fixadas pode ser feito assinando o evento ColumnPin e alterando a propriedade InsertAtIndex dos argumentos do evento para o índice de posição desejado.

    Uma coluna é fixada à direita da coluna fixada mais à direita. Alterar a ordem das colunas fixadas pode ser feito assinando o evento ColumnPinScript e fornecendo uma função JavaScript para alterar a propriedade InsertAtIndex dos argumentos do evento para o índice de posição desejado.

    <IgbGrid Data=data AutoGenerate=true ColumnPinScript="onColumnPin"/>


//In JavaScript
function onColumnPin(e) {
    if (e.detail.column.field == "Country") {
        e.detail.insertAtIndex = 0;
    }
}

igRegisterScript("onColumnPin", onColumnPin, false);

    Pinning Position

    Você pode alterar a posição de fixação da coluna por meio da opção de configuração Pinning. Ela permite que você defina a posição das colunas para Início ou Fim. Quando definido como Fim, as colunas são renderizadas no final da grade, após as colunas não fixadas. As colunas não fixadas podem ser roladas horizontalmente, enquanto as colunas fixadas permanecem fixas à direita.

    <IgbGrid Data=data AutoGenerate=true Pinning="pinningConfig"></IgbGrid>

@code {
    private IgbPinningConfig pinningConfig = new() {
        Columns = ColumnPinningPosition.End
    };
}

    Demo

    Custom Column Pinning UI

    Você pode definir sua interface do usuário personalizada e alterar o estado do pino das colunas por meio da API relacionada.

    Digamos que, em vez de uma barra de ferramentas, você queira definir ícones de alfinetes nos cabeçalhos das colunas, nos quais o usuário final pode clicar para alterar o estado de alfinete de uma coluna específica.

    Isso pode ser feito criando um modelo de cabeçalho para as colunas com um ícone personalizado.

    <IgbGrid AutoGenerate="false" Data="CustomersData" Name="grid" @ref="grid">
    <IgbColumn Field="ID" Hidden="true"></IgbColumn>

    <IgbColumn Field="CompanyName" Header="Company" Width="300px" 
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>

    <IgbColumn Field="ContactName" Header="Name" Width="200px" Pinned="true"
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column2" @ref="column2"> </IgbColumn>

    <IgbColumn Field="ContactTitle" Header="Title" Width="200px" Pinned="true"
    HeaderTemplateScript="WebGridPinHeaderTemplate" Name="column3" @ref="column3"> </IgbColumn>
</IgbGrid>

// In JavaScript
igRegisterScript("WebGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-grid")[0];
        var col = grid.getColumnByName(field);
        col.pinned = !col.pinned;
        grid.markForCheck();
    }
    return html`<div>
    <span style="float:left">${ctx.column.field}</span>
    <span style="float:right" @pointerdown="${() => toggleColumnPin(ctx.column.field)}">📌</span>
</div>`;
}, false);

    Demo

    Pinning Limitations

    • Definir larguras de coluna em porcentagem (%) explicitamente faz com que o corpo IgbGrid e o conteúdo do cabeçalho fiquem desalinhados quando há colunas fixadas. Para que a fixação de colunas funcione corretamente, as larguras das colunas devem estar em pixels (px) ou atribuídas automaticamente pelo IgbGrid.

    Styling

    Além dos temas predefinidos, a grade pode ser ainda mais personalizada ao definir algumas das propriedades CSS disponíveis. Caso você queira alterar algumas das cores, precisa definir um ID para a grade primeiro:

    <IgbGrid Id="grid"></IgbGrid>

    Em seguida, defina as propriedades CSS relacionadas a esta classe:

    #grid {
    --ig-grid-pinned-border-width: 5px;
    --ig-grid-pinned-border-color: #FFCD0F;
    --ig-grid-pinned-border-style: double;
    --ig-grid-cell-active-border-color: #FFCD0F;
}

    Demo

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.