Angular Tree Grid Column Pinning

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 da árvore. A Grade da interface do usuário do material tem uma interface de usuário de fixação de coluna integrada, que pode ser usada por meio da barra de ferramentas da grade de árvore 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 Tree Grid Column Pinning Example

Column Pinning API

Column pinning is controlled through the pinned input of the igx-column. Pinned columns are rendered on the left side of the Tree Grid by default and stay fixed through horizontal scrolling of the unpinned columns in the Tree Grid body.

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false">
    <igx-column [field]="Name" [pinned]="true"></igx-column>
    <igx-column [field]="Title"></igx-column>
    <igx-column [field]="ID"></igx-column>
</igx-tree-grid>

You may also use the Tree Grid's pinColumn or unpinColumn methods of the IgxTreeGridComponent to pin or unpin columns by their field name:

this.treeGrid.pinColumn('Title');
this.treeGrid.unpinColumn('Name');

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 está fixada à direita da coluna fixada mais à direita. Mudar a ordem das colunas fixadas pode ser feito assinando ocolumnPin evento e alterando ainsertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

<igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="true" (columnPin)="columnPinning($event)"></igx-tree-grid>

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

Pinning Position

Você pode mudar a posição de fixação da coluna pelapinning opção de configuração. Ele permite definir a posição da coluna para Start ou End. Quando definidas para End, as colunas são renderizadas no final da grade, após as colunas sem fixar. Colunas sem fixação podem ser roladas horizontalmente, enquanto as colunas fixadas permanecem fixas à direita.

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

public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };

Demo

Além disso, você pode especificar cada local de fixação de coluna separadamente, permitindo fixar colunas em ambos os lados da grade para maior conveniência e otimização mais fácil dos conjuntos de dados. Consulte a demonstração abaixo para obter mais referências. Para fixar uma coluna, selecione uma coluna clicando em um cabeçalho e use os botões de fixação adicionados à barra de ferramentas ou simplesmente arraste uma coluna para outra fixada.

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>
<div class="grid__wrapper">
    <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" height="620px"
        width="100%">
        <igx-column [field]="'Name'" dataType="string" [headerTemplate]="pinTemplate" width="250px"></igx-column>
        <igx-column [field]="'Title'" dataType="string" [headerTemplate]="pinTemplate" width="300px"></igx-column>
        <igx-column [field]="'ID'" dataType="number" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'HireDate'" header="Hire Date" dataType="date" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Age'" dataType="number" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Address'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'City'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Country'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Fax'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'PostalCode'" header="Postal Code" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
        <igx-column [field]="'Phone'" dataType="string" [headerTemplate]="pinTemplate" width="200px"></igx-column>
    </igx-tree-grid>
</div>

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 de Árvore 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 de Árvore.

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular Tree Grid Column Pinning