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 templateado e o Column Moving estiver ativado ou a coluna correspondente for agrupável, então os elementos templateados precisam ter o atributo arrastável configurado como falso! Isso permite anexar handlers para qualquer evento emitido pelo elemento, caso contrário o evento é consumido pelaigxDrag 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 colunas é ativado em nível por grade, o que significa que a grade igx pode ter colunas móveis ou imóveis. Isso é feito por meio damoving entrada doigx-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 alvo). O primeiro parâmetro é a coluna a ser movida, e o segundo parâmetro é a coluna alvo. Também aceita um terceiro parâmetroposition opcional (representando umDropPosition valor), que determina se colocar a coluna 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 (negativo ou exceder o número de colunas), ou se a coluna não puder se mover para esse índice (se estiver dentro de outro grupo), nenhuma operação é realizada.

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

    Note que, ao usar a API, apenas ocolumnMovingEnd evento será emitido, caso a operação tenha sido bem-sucedida. Também vale notar que, em comparação com a funcionalidade de arrastar e soltar, usar a API não exige definir amoving propriedade como true.

    Eventos

    Existem vários eventos relacionados ao movimento da coluna para fornecer um meio de acessar as operações de arrastar e soltar das colunas. Estes sãocolumnMovingStart,columnMoving ecolumnMovingEnd. Você pode assinar ocolumnMovingEnd evento de paraigx-grid implementar alguma lógica personalizada quando uma coluna for colocada em uma nova posição. Por exemplo, você pode cancelar a eliminação da Categoria após a coluna Mudança de 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 móveis da coluna Grid, precisamos importar oindex arquivo, onde todas as funções de tema e os componentes mixins estão ativos:

    @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 egrid-theme aceita os$ghost-header-background​$ghost-header-text-color​$ghost-header-icon-color parâmetros.

    // 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 alcançar maior flexibilidade em termos de cores usando aspalette funções e.color Por favor, consulte oPalettes tópico para 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 pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.