Angular Fixação de linha de grade

    Uma ou várias linhas podem ser fixadas na parte superior ou inferior da grade da interface do usuário do Angular. A fixação de linha no 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 rolam a grade verticalmente. A grade da interface do usuário do material tem uma interface de usuário de fixação de linha integrada, que é ativada inicializando um igxActionStrip componente no contexto da grade. Além disso, você pode definir a interface do usuário personalizada e alterar o estado do pino das linhas por meio da API de fixação de linha.

    Angular Grid Row Pinning Example

    Row Pinning UI

    A interface do usuário de fixação de linha interna é habilitada adicionando um igxActionStrip componente com o GridPinningActions componente. A faixa de ação é mostrada automaticamente ao passar o mouse sobre uma linha e exibirá um ícone de botão de fixar ou desafixar com base no estado da linha para a qual ela é mostrada. Uma ação adicional que permite rolar a cópia da linha fixada para a exibição também é mostrada para cada linha fixada.

    <igx-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-grid>

    Row Pinning API

    A fixação de linha é controlada por meio da pinned entrada do row. As linhas fixadas são renderizadas na parte superior da grade por padrão e permanecem fixas por meio da rolagem vertical das linhas não afixadas no corpo da grade.

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

    Você também pode usar os Grid's pinRow ou unpinRow métodos do IgxGridComponent para fixar ou desafixar registros por seu ID:

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

    Observe que a ID da linha é o valor da chave primária, definido pela grade ou pela primaryKey própria instância do registro. 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 linha já está no estado desejado.

    Uma linha é fixada abaixo da última linha fixada. A alteração da ordem das linhas fixadas pode ser feita assinando o rowPinning evento e alterando a insertAtIndex propriedade dos argumentos do evento para o índice de posição desejado.

    <igx-grid #grid1 [data]="data" [autoGenerate]="true" (rowPinning)="rowPinning($event)">
</igx-grid>

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

    Pinning Position

    Você pode alterar a posição de fixação da linha por meio da pinning opção de configuração. Ele permite que você defina a posição da área do pino como Superior ou Inferior. Quando definido como Inferior, as linhas fixadas são renderizadas na parte inferior da grade, após as linhas desafixadas. As linhas não afixadas podem ser roladas verticalmente, enquanto as linhas fixadas permanecem fixas na parte inferior.

    <igx-grid [data]="data" [autoGenerate]="true" [pinning]="pinningConfig"></igx-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-grid [data]="data" [primaryKey]="'ID'" [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-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

    Via row drag

    Digamos que você queira arrastar e soltar diretamente uma linha entre as linhas fixadas e desafixadas para alterar seu estado de fixação. Isso pode ser feito ativando o recurso de arrastar linha e fixando/desafixando as linhas por meio da API ao soltar.

    Primeiro, a grade deve ser marcada como uma área de soltar usando a igxDrop diretiva e a funcionalidade de arrastar linha deve ser habilitada por meio da rowDraggable opção.

    <igx-grid [data]="data" [autoGenerate]="true" [rowDraggable]="true"
    [primaryKey]="'ID'" igxDrop (dropped)="onDropAllowed($event)">
</igx-grid>

    Em seguida, o dropped evento pode ser usado para lidar com a lógica de reordenação e fixação/desafixação.

    public onDropAllowed(args) {
    const event = args.originalEvent;
    let currRowPinnedIndex;
    const currRowIndex = this.getCurrentRowIndex(this.grid.rowList.toArray(),
        { x: event.clientX, y: event.clientY });
    if (currRowIndex === -1) { return; }

    const currRowID = this.getCurrentRowID(this.grid.rowList.toArray(),
        { x: event.clientX, y: event.clientY });

    const currentRow = this.grid.rowList.toArray().find((r) => r.rowID === currRowID);
    if (currentRow.pinned) {
        currRowPinnedIndex = this.grid.pinnedRows.indexOf(this.grid.pinnedRows.find((r) => r.rowID === currRowID));
    }
    // remove the row that was dragged and place it onto its new location
    this.grid.deleteRow(args.dragData.key);
    this.data.splice(currRowIndex, 0, args.dragData.data);
    if (currentRow.pinned && !args.dragData.pinned) {
        this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
    } else if (!currentRow.pinned && args.dragData.pinned) {
        this.grid.unpinRow(args.dragData.key);
    } else if (currentRow.pinned && args.dragData.pinned) {
        this.grid.unpinRow(args.dragData.key);
        this.grid.pinRow(args.dragData.key, currRowPinnedIndex);
    }
}

    Isso permitiria reordenar as linhas e movê-las entre as coleções de linhas fixadas e não afixadas.

    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ão tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitaçõ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 IgxGrid permite estilizar através do Ignite UI for Angular Theme Library. O Grid grid-theme expõe uma grande variedade de propriedades, que permitem a personalização de todos os recursos do Grid.

    Abaixo, estamos seguindo as etapas de personalização do estilo de fixação de linha do Grid.

    Importing the Styling Library

    Para iniciar a personalização do recurso de fixação de linha, você precisa importar o index arquivo, onde todas as funções de estilo e mixins estão localizados.

    @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 e grid-theme aceite os parâmetros, necessários para personalizar o recurso de fixação de linha 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 Change Theme pelo tema global selecionado.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.