Blazor Tree Grid Column Pinning

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

    Blazor Tree Grid Column Pinning Example

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

    Column Pinning API

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

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

    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.

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

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

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

    <IgbTreeGrid AutoGenerate="false" Name="treeGrid" @ref="treeGrid" Data="EmployeesFlatData" PrimaryKey="ID" ForeignKey="ParentID">
    <IgbColumn Field="Name" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column1" @ref="column1"></IgbColumn>

    <IgbColumn Field="Title" DataType="String" Pinned="true"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column2" @ref="column2"></IgbColumn>
        
    <IgbColumn Field="Phone" DataType="String"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column3" @ref="column3"></IgbColumn>
            
    <IgbColumn Field="Age" DataType="Number"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column4" @ref="column4"></IgbColumn>
            
    <IgbColumn Field="HireDate" DataType="Date"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column5" @ref="column5"></IgbColumn>
            
    <IgbColumn Field="OnPTO" DataType="Boolean"
    HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"></IgbColumn>
</IgbTreeGrid> 


// In JavaScript

igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => {
    var html = window.igTemplating.html;
    window.toggleColumnPin = function toggleColumnPin(field) {
        var grid = document.getElementsByTagName("igc-tree-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" onpointerdown='toggleColumnPin("${ctx.column.field}")'>📌</span>
</div>`;
}, false);

    Demo

    Pinning Limitations

    • Definir larguras de coluna em porcentagem (%) explicitamente faz com que o conteúdo do corpo e do IgbTreeGrid cabeçalho fique desalinhado quando houver 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 IgbTreeGrid.

    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:

    <IgbTreeGrid Id="grid"></IgbTreeGrid>

    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.