Reordenação e movimentação de colunas da grade

    O componente Grade no Ignite UI for Angular fornece o recurso Movimentação de Coluna para permitir a reordenação de colunas por meio de gestos padrão de arrastar/soltar do mouse ou de toque ou usando a API de Movimentação de Coluna. A movimentação de colunas funciona com colunas fixadas e não fixadas e com cabeçalhos de várias colunas. Mover uma coluna para a área fixada fixa a coluna e vice-versa, mover uma coluna para fora da área fixada desafixa a coluna.

    Note

    A reordenação entre colunas e grupos de colunas é permitida somente quando eles estão no mesmo nível na hierarquia e ambos estão no mesmo grupo. A movimentação é permitida entre colunas/grupos de colunas, se forem colunas de nível superior.

    Note

    Se um cabeçalho de coluna for modelado e o Column Moving estiver habilitado ou a coluna correspondente for agrupável, os elementos modelados precisarão ter o atributo arrastável definido como false! Isso permite anexar manipuladores para qualquer evento emitido pelo elemento, caso contrário, o evento é consumido igxDrag pela diretiva.

    Note

    Se a área fixada exceder sua largura máxima permitida (80% da largura total da Grade), uma pista visual notificará o usuário final de que a operação de soltar é proibida e a fixação não é possível. Isso significa que você não terá permissão para soltar uma coluna na área fixada.

    <ng-template igxHeader>
    <igx-icon [attr.draggable]="false" (click)="onClick()"></igx-icon>
</ng-template>

    Angular Grid Column Moving Overview Example

    Visão geral

    O recurso de movimentação de coluna é habilitado em um nível por grade, o que significa que a grade igx pode ter colunas móveis ou imóveis. Isso é feito por meio da moving entrada do igx-grid.

    <igx-grid [moving]="true"></igx-grid>

    API

    Além da funcionalidade de arrastar e soltar, o recurso Movimentação de Coluna também fornece dois métodos de API para permitir mover uma coluna/reordenar colunas programaticamente:

    moveColumn- Move uma coluna antes ou depois de outra coluna (um destino). O primeiro parâmetro é a coluna a ser movida e o segundo parâmetro é a coluna de destino. Também aceita um terceiro parâmetro position opcional (representando um DropPosition valor), que determina se a coluna deve ser colocada antes ou depois da coluna de destino.

    // Move the ID column after the Name column
const idColumn = grid.getColumnByName("ID");
const nameColumn = grid.getColumnByName("Name");

grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);

    move- Move uma coluna para um índice visível especificado. Se o parâmetro de índice passado for inválido (for negativo ou exceder o número de colunas) ou se a coluna não tiver permissão para se mover para esse índice (se estiver dentro de outro grupo), nenhuma operação será executada.

    // Move the ID column at 3rd position.
const idColumn = grid.getColumnByName("ID");
idColumn.move(3);

    Observe que, ao usar a API, apenas o columnMovingEnd evento será emitido, se a operação for bem-sucedida. Observe também que, em comparação com a funcionalidade de arrastar e soltar, o uso da API não requer a configuração da moving propriedade como true.

    Eventos

    Existem vários eventos relacionados à movimentação da coluna para fornecer um meio de explorar as operações de arrastar e soltar das colunas. Estes são columnMovingStart, columnMoving e columnMovingEnd. Você pode se inscrever no columnMovingEnd​ ​igx-grid evento do para implementar alguma lógica personalizada quando uma coluna é descartada para uma nova posição. Por exemplo, você pode cancelar o descarte da Categoria após a coluna Alterar no Ano(%).

    <igx-grid #dataGrid [data]="data" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Category'"></igx-column>
    <igx-column [field]="'Change On Year(%)'" [dataType]="'number'" ></igx-column>
</igx-grid>

    public onColumnMovingEnd(event) {
    if (event.source.field === "Category" && event.target.field === "Change On Year(%)") {
        event.cancel = true;
    }
}

    Estilização

    Para começar a estilizar os cabeçalhos de movimentação da coluna Grid, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes residem:

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

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

    Seguindo a abordagem mais simples, criamos um novo tema que estende os grid-theme parâmetros e aceita os $ghost-header-background​ ​$ghost-header-text-color parâmetros e . $ghost-header-icon-color​

    // Define dark theme for the column moving
$dark-grid-column-moving-theme: grid-theme(
  $ghost-header-text-color: #f4d45c,
  $ghost-header-background: #575757,
  $ghost-header-icon-color: #f4bb5c
);
    Note

    Em vez de codificar os valores de cor como acabamos de fazer, podemos obter maior flexibilidade em termos de cores usando as palette funções e color. Consulte o Palettes tópico para obter orientações detalhadas sobre como usá-los.

    O último passo é incluir os mixins de componentes com seu respectivo tema:

    @include css-vars($dark-grid-column-moving-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.