Angular Seleção de coluna de grade

O recurso de seleção de coluna fornece uma maneira fácil de selecionar uma coluna inteira com um único clique. Ele enfatiza a importância de uma coluna específica, concentrando-se na(s) célula(s) de cabeçalho e tudo abaixo. O recurso vem com um rico API que permite a manipulação do estado de seleção, extração de dados das frações selecionadas e operações e visualizações de análise de dados.

Angular Column Selection Example

O exemplo abaixo demonstra os três tipos de comportamento de seleção de coluna do Grid. Use o menu suspenso de seleção de coluna abaixo para ativar cada um dos modos de seleção disponíveis.

* As colunas Título do contato, Cidade e Endereço estão com a seleção de coluna desabilitada.

Basic usage

O recurso de seleção de coluna pode ser habilitado por meio da columnSelection entrada, que usa valores GridSelectionMode.

Interações

O modo de seleção padrão é none. Se definido como single ou multiple todas as colunas apresentadas serão selectable. Com isso dito, para selecionar uma coluna, basta clicar em uma, que a marcará como selected. Se a coluna não for selecionável, nenhum estilo de seleção será aplicado no cabeçalho, enquanto estiver passando o mouse.

Note

Multi-column Headers não reflita sobre a selectable entrada. O IgxColumnGroupComponent é selectable, se pelo menos um de seus filhos tiver o comportamento de seleção habilitado. Além disso, o componente é marcado como selected se todos os seus selectable descendentes fossem selected.

*No Grupo de Colunas de Informações do País, somente as colunas Cidade e Código Postal são selecionáveis.

Keyboard combinations

Note

As combinações de teclado estão disponíveis apenas quando a entrada de grade columnSelection está definida como multiple.

Há dois cenários para navegação pelo teclado do recurso Seleção de Coluna:

Seleção de várias colunas - segure ctrl + clique em cada célula de cabeçalho selecionável.
Seleção de coluna de intervalo - segurar shift + clicar seleciona todas as colunas selecionáveis entre elas.

API manipulations

A API fornece alguns recursos adicionais quando se trata de colunas não visíveis, de modo que cada coluna oculta pode ser marcada como selected definindo o setter correspondente.

Note

A afirmação acima também se aplica ao IgxColumnGroupComponent, exceto que quando a selected propriedade é alterada, ela altera o estado de seus descendentes.

Mais informações sobre as manipulações da API podem ser encontradas na API References seção.

Estilização

Antes de mergulhar nas opções de estilo, o módulo principal e todos os mixins de componentes precisam ser importados.

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

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

Note

Observe isso row selection e column selection não pode ser manipulado de forma independente. Eles dependem do mesmo variables.

Com isso dito, vamos seguir em frente e alterar os estilos de seleção e foco.
Seguindo a abordagem mais simples, vamos definir nosso tema personalizado.

$custom-grid-theme: grid-theme(
  $row-selected-background: #011627,
  $row-selected-text-color: #ecaa53,
  $row-selected-hover-background: #011627,
  $header-selected-text-color: #ecaa53,
  $header-selected-background: #011627
);

O aceita vários parâmetros, grid-theme mas esses são os cinco responsáveis por alterar a aparência de todas as colunas selecionadas:

$row-selected-background- define o plano de fundo da fração selecionada.
$row-selected-text-color- define a cor do texto da fração selecionada
$row-selected-hover-background- define a cor da célula pairada ou do grupo de células.
$header-selected-text-color- define a cor do texto do cabeçalho da coluna selecionada
$header-selected-background- define a cor de fundo do cabeçalho da coluna selecionada.