Angular Tree Grid Row Pinning

    Uma ou várias linhas podem ser fixadas no topo ou na parte inferior da Angular Grade da UI. O Fixar Linhas em Ignite UI for Angular permite que os usuários finais fixem linhas em uma ordem específica, duplicando-as em uma área especial que está sempre visível mesmo quando eles rolam a Grade de Árvore verticalmente. A Grade da Interface Material possui uma interface de fixação de linhas embutida, que é habilitada inicializando umigxActionStrip componente no contexto da Grade de Árvore. Além disso, você pode definir uma interface personalizada e alterar o estado dos pinos das linhas via a API de Pineamento de Linhas.

    Angular Tree Grid Row Pinning Example

    Row Pinning UI

    A interface de fixação de linha embutida é ativada adicionando umigxActionStrip componente ao componenteGridPinningActions. A fita de ação é mostrada automaticamente ao passar o mouse por uma linha e exibe um ícone de botão de fixar ou desfixar com base no estado da linha para a qual ela é mostrada. Uma ação adicional permitindo rolar a cópia da linha fixada para a visualização é mostrada para cada linha fixada também.

    <igx-tree-grid [data]="data" [autoGenerate]="false">
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>

    <igx-action-strip #actionStrip>
        <igx-grid-pinning-actions></igx-grid-pinning-actions>
        <igx-grid-editing-actions></igx-grid-editing-actions>
    </igx-action-strip>
</igx-tree-grid>

    Row Pinning API

    O fixação de fileiras é controlado pelapinned entrada dorow. As linhas fixadas são renderizadas no topo da Grade de Árvore por padrão e permanecem fixas por meio de rolagem vertical das linhas não fixadas no corpo da Grade de Árvore.

    this.treeGrid.getRowByIndex(0).pinned = true;

    Você também pode usar as Tree GridspinRow ouunpinRow métodosIgxTreeGridComponent para fixar ou desfixar registros pelo ID deles:

    this.treeGrid.pinRow('ALFKI');
this.treeGrid.unpinRow('ALFKI');

    Note que o ID da linha é o valor primário-chave, definido peloprimaryKey da grade ou pela própria instância do registro. Ambos os métodos retornam um valor booleano indicando se sua respectiva operação é bem-sucedida ou não. Normalmente, o motivo de falharem é que a linha já está no estado desejado.

    Uma fileira é fixada abaixo da última fileira fixada. Alterar a ordem das linhas fixadas pode ser feito assinando orowPinning 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" (rowPinning)="rowPinning($event)">
</igx-tree-grid>

    public rowPinning(event) {
    event.insertAtIndex = 0;
}

    Pinning Position

    Você pode mudar a posição de fixação da linha pelapinning opção de configuração. Ele permite definir a posição da área do pino para Cima ou Baixo. Quando definidas como Bottom, as linhas fixadas são renderizadas na parte inferior da grade, após as linhas sem fixar. As linhas não fixadas podem ser roladas verticalmente, enquanto as fileiras fixadas permanecem fixas na parte inferior.

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

    public pinningConfig: IPinningConfig = { rows: RowPinningPosition.Bottom };

    Custom Row Pinning UI

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

    Via extra column with icon

    Digamos que, em vez de uma faixa de ação, você gostaria de mostrar um ícone de alfinete em cada linha, permitindo que o usuário final clique e altere o estado do alfinete de uma linha específica. Isso pode ser feito adicionando uma coluna extra com um modelo de célula contendo o ícone personalizado.

    <igx-tree-grid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false">
    <igx-column width="70px">
        <ng-template igxCell let-cell="cell" let-val>
            <igx-icon class="pin-icon" (mousedown)="togglePinning(cell.row, $event)">
                {{cell.row.pinned ? 'lock' : 'lock_open'}}
            </igx-icon>
        </ng-template>
    </igx-column>
    <igx-column *ngFor="let c of columns" [field]="c.field" [header]="c.field">
    </igx-column>
</igx-tree-grid>

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

    public togglePinning(row: IgxGridRow, event) {
    event.preventDefault();
    if (row.pinned) {
        row.unpin();
    } else {
        row.pin();
    }
}

    Demo

    Row Pinning Limitations

    • Somente os registros existentes na fonte de dados podem ser fixados.
    • O estado de fixação de linha não é exportado para o Excel. A grade é exportada como se nenhuma fixação de linha fosse aplicada.
    • Devido à forma como as linhas fixadas são armazenadas internamente para que possam aparecer nas áreas fixadas e não afixadas da grade, não há suporte para a fixação de linha quando os registros na grade são buscados de um ponto de extremidade remoto sob demanda (virtualização remota).
    • As cópias de linhas fixadas na área rolável da grade são parte integrante de como outros recursos de grade alcançam sua funcionalidade na presença de linhas fixadas e, portanto, sua criação não pode ser desabilitada nem removida.
    • Como a Seleção de linha funciona inteiramente com IDs de linha, a seleção de linhas fixadas também seleciona suas cópias (e vice-versa). Além disso, a seleção de intervalo (por exemplo, usando Shift + clique) na área fixada funciona da mesma maneira que a seleção de um intervalo de linhas na área rolável. A seleção resultante inclui todas as linhas intermediárias, mesmo que elas não estejam fixadas no momento. Obter as linhas selecionadas por meio da API retorna apenas uma única instância de cada registro selecionado.
    • Quando a grade nãoprimaryKey tem um set definido e cenários de dados remotos são ativados (ao paginar, ordenar, filtrar, rolar requisições de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
      • Seleção de linha
      • Expandir/recolher linha
      • Edição de linha
      • Fixação de linha

    Estilização

    O IgxTreeGrid permite estilização através doIgnite UI for Angular Theme Library. A Gradegrid-theme da Árvore expõe uma grande variedade de propriedades, que permitem a personalização de todos os recursos da Grade da Árvore.

    Abaixo, estamos passando pelas etapas de personalização do estilo de fixação de linha da Grade de Árvore.

    Importing the Styling Library

    Para começar a customização do recurso de fixação de linhas, você precisa importar oindex arquivo, onde todas as funções de estilo e mixins estão localizadas.

    @use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

    Defining a Theme

    Em seguida, crie um novo tema que estenda egrid-theme aceite os parâmetros necessários para personalizar o recurso de fixação de linhas conforme desejado.

    $custom-grid-theme: grid-theme(
  $pinned-border-width: 5px,
  $pinned-border-style: double,
  $pinned-border-color: #ffcd0f,
  $cell-active-border-color: #ffcd0f
);

    Using CSS variables

    A última etapa é passar o tema de grade personalizado:

    @include css-vars($custom-grid-theme);

    Demo

    Note

    A amostra não será afetada pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.