Árvore Grade Coluna Reordenação & Movimentação

    O componente Grade de árvore no Ignite UI for Angular fornece o recurso Movimentação de colunas 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 colunas. 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 de Árvore), 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 Tree 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 da árvore igx pode ter colunas móveis ou imóveis. Isso é feito por meio damoving entrada doigx-grid.

    <igx-tree-grid [moving]="true"></igx-tree-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-tree-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-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID" [autoGenerate]="false" [moving]="true" (columnMovingEnd)="onColumnMovingEnd($event)">
    <igx-column [field]="'Name'" dataType="string" width="250px"></igx-column>
    <igx-column [field]="'Title'" dataType="string" width="250px"></igx-column>
</igx-tree-grid>

    public onColumnMovingEnd(event) {
    if (event.source.field === "Name" && event.target.field === "Title") {
        event.cancel = true;
    }
}

    Estilização

    Para começar a estilizar os cabeçalhos móveis das colunas Tree Grid, precisamos importar oindex arquivo, onde todas as funções de tema e mixins de componentes 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.