Angular Fixação de coluna de grade hierárquica

    Uma coluna ou várias colunas podem ser fixadas no lado esquerdo ou direito da grade da interface do usuário do Angular. A fixação de coluna no Ignite UI for Angular permite que os usuários finais bloqueiem a coluna em uma ordem de coluna específica, o que permitirá que eles a vejam enquanto rolam horizontalmente a grade hierárquica. A Grade da interface do usuário do Material tem uma interface do usuário de fixação de coluna interna, que pode ser usada por meio da barra de ferramentas da Grade hierárquica para alterar o estado do pino das colunas. Além disso, você pode definir uma interface do usuário personalizada e alterar o estado do pino das colunas por meio da API de fixação de coluna.

    Angular Hierarchical Grid Column Pinning Example

    Column Pinning API

    A fixação da coluna é controlada através da pinned entrada do igx-column. As colunas fixadas são renderizadas no lado esquerdo da Grade Hierárquica por padrão e permanecem fixas por meio da rolagem horizontal das colunas não afixadas no corpo da Grade Hierárquica.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'800px'" #hierarchicalGrid>
    <igx-column [field]="Artist" [width]="200px" [pinned]="true"></igx-column>
    <igx-column [field]="Debut" [width]="200px"></igx-column>
</igx-hierarchical-grid>

    Você também pode usar a Grade pinColumn Hierárquica ou unpinColumn métodos do para fixar ou desafixar colunas pelo nome do IgxHierarchicalGridComponent campo:

    this.hierarchicalGrid.pinColumn('Artist');
this.hierarchicalGrid.unpinColumn('Debut');

    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. A alteração da ordem das colunas fixadas pode ser feita assinando o columnPin evento e alterando a insertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

    <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'800px'" 
        (columnPin)="columnPinning($event)" #hierarchicalGrid>
</igx-hierarchical-grid> 

    public columnPinning(event) {
    if (event.column.field === 'Artist') {
        event.insertAtIndex = 0;
    }
}

    Pinning Position

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

    <igx-hierarchical-grid #grid1 [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-hierarchical-grid>

    public pinningConfig: IPinningConfig = { 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ê gostaria de definir ícones de pino nos cabeçalhos de coluna nos quais o usuário final pode clicar para alterar o estado do pino da coluna específica. Isso pode ser feito criando um modelo de cabeçalho para a coluna com um ícone personalizado.

    <ng-template igxHeader let-column #pinTemplate>
    <div class="title-inner">
        <span style="float:left">{{column.header || column.field}}</span>
        <igx-icon class="pin-icon" [class.pinned]="column.pinned" [class.unpinned]="!column.pinned" fontSet="fas" name="fa-thumbtack"
            (click)="toggleColumn(column)"></igx-icon>
    </div>
</ng-template>
<igx-hierarchical-grid class="hierarchicalGrid" [data]="localdata" [autoGenerate]="false"
    [height]="'500px'" [width]="'100%'" #hierarchicalGrid>
    <igx-column field="CompanyName" header="Company Name" [headerTemplate]="pinTemplate" width="200px" [pinned]="true"></igx-column>
    <igx-column field="ContactName" header="Contact Name" [headerTemplate]="pinTemplate" width="150px"></igx-column>
    <igx-column field="ContactTitle" header="Contact Title" [headerTemplate]="pinTemplate" width="200px"></igx-column>
    <igx-row-island [key]="'Orders'" [autoGenerate]="false">
        <igx-column field="OrderDate" header="Order Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="RequiredDate" header="Required Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="ShippedDate" header="Shipped Date" [headerTemplate]="pinTemplate" [dataType]="'date'" width="150px"></igx-column>
        <igx-column field="ShipVia" header="Ship Via" [headerTemplate]="pinTemplate" width="150px"></igx-column>
        <igx-row-island [key]="'OrderDetails'" [autoGenerate]="false">
            <igx-column field="UnitPrice" header="Unit Price" width="150px"></igx-column>
            <igx-column field="Quantity" width="150px"></igx-column>
            <igx-column field="Discount" width="150px"></igx-column>
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>

    Ao clicar no ícone personalizado, o estado do pino da coluna relacionada pode ser alterado usando os métodos de API da coluna.

    public toggleColumn(col: ColumnType) {
    col.pinned ? col.unpin() : col.pin();
}

    Demo

    Pinning Limitations

    • Definir larguras de coluna em porcentagem (%) explicitamente faz com que o corpo da Grade Hierárquica e o conteúdo do cabeçalho fiquem desalinhados 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 pela Grade Hierárquica.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.