Angular Seleção de coluna de grade

O recurso de seleção de colunas oferece uma maneira fácil de selecionar uma coluna inteira com um único clique. Ela enfatiza a importância de uma coluna específica ao focar na(s) célula(s) do cabeçalho e tudo abaixo. O recurso vem com uma riquezaAPI que permite a manipulação do estado de seleção, extração de dados das frações selecionadas e operações de análise e visualizações 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 colunas pode ser ativado através dacolumnSelection entrada, que recebe valores do GridSelectionMode.

Interações

O modo de seleção padrão énone. Se definido comosingle oumultiple todas as colunas apresentadas estarãoselectable disponíveis. Dito isso, para selecionar uma coluna, basta clicar em uma, que a marcará comoselected. Se a coluna não for selecionável, nenhum estilo de seleção será aplicado no cabeçalho, enquanto estiver flutuando.

Note

Multi-column HeadersNão reflita sobre aselectable entrada. OIgxColumnGroupComponent éselectable, se pelo menos um de seus filhos tiver o comportamento de seleção ativado. Além disso, o componente é marcado comoselected se todos os seusselectable descendentes fossemselected.

*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 só estão disponíveis quando a entrada de gradecolumnSelection está configurada paramultiple.

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 oferece algumas capacidades adicionais quando se trata das colunas invisíveis, de modo que toda coluna oculta pode ser marcada comoselected definindo o setter correspondente.

Note

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

Mais informações sobre as manipulações da API podem ser encontradas naAPI 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

Por favor, note issorow selection ecolumn selection não pode ser manipulado de forma independente. Eles dependem da mesmavariables coisa.

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
);

Aceitagrid-theme vários parâmetros, 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.