Angular Seleção de células

O recurso de seleção permite recursos avançados de seleção de dados na grade baseada na interface do usuário do material. Variedade de eventos e ações de seleção única estão disponíveis graças à poderosa API e métodos fáceis de usar. A grade agora suporta três modos de seleção de células, e você pode alternar facilmente entre eles alterando a cellSelection propriedade. Você pode desativar a seleção de células, selecionar apenas uma célula na grade ou selecionar várias células na grade, que é fornecida como opção padrão. Mas vamos nos aprofundar em cada uma dessas opções.

Angular Cell Selection Example

O exemplo abaixo demonstra os três tipos de comportamento de seleção de células do Grid. Use os botões abaixo para ativar cada um dos modos de seleção disponíveis. Uma breve descrição será fornecida em cada interação do botão por meio de uma caixa de mensagem de lanchonete.

Selection types

Grid Multiple-cell Selection

Como selecionar células:

Por Mouse drag- A seleção retangular de dados das células seria realizada.
Ao Ctrl key pressionar + Mouse drag-, várias seleções de intervalo seriam realizadas. Qualquer outra seleção de célula existente será mantida.
Seleção instantânea de várias células usando a tecla Shift. Selecione uma única célula e selecione outra única célula mantendo pressionada a tecla Shift. O intervalo de células entre as duas células será selecionado. Lembre-se de que, se outra segunda célula for selecionada enquanto estiver pressionada Shift key, o intervalo de seleção de células será atualizado com base na primeira posição da célula selecionada (ponto inicial).
Seleção de várias células do teclado usando enquanto Arrow keys segura. Shift key O intervalo de seleção de várias células será criado com base na célula focada.
Seleção de várias células do teclado usando o Ctrl + Arrow keys e Ctrl + Home/End enquanto segura. Shift key O intervalo de seleção de várias células será criado com base na célula focada.
Clicar com o Left Mouse key while segurando Ctrl key adicionará intervalos de células únicas à coleção de células selecionadas.
A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

Demo

Grid Single Selection

Quando você define o [cellSelection]="'single'", isso permite que você tenha apenas uma célula selecionada na grade por vez. Além disso, o modo mouse drag não funcionará e, em vez de selecionar uma célula, isso fará a seleção de texto padrão.

Note

Quando uma única célula é selecionada selected, o evento é emitido, não importa se o selection mode é single ou multiple. No modo de seleção de várias células, quando você seleciona um intervalo de células rangeSelected, o evento é emitido.

Grid None selection

Se você deseja desativar a seleção de células, basta definir a [cellSelection]="'none'" propriedade. Neste modo, quando você clica sobre a célula ou tenta navegar com o teclado, a célula não é selecionada, apenas a activation style é aplicada e será perdida quando você rolar ou clicar sobre outro elemento da página. A única maneira de definir a seleção é usando os métodos de API descritos abaixo.

While Shift key is pressed

Shift + Arrow Up para adicionar a célula acima à seleção atual.
Shift + Arrow Down para adicionar a célula abaixo à seleção atual.
Shift + Arrow Left para adicionar a célula esquerda à seleção atual.
Shift + Arrow Right para adicionar a célula direita à seleção atual.

While Ctrl + Shift keys are pressed

Ctrl + Shift + Arrow Up para selecionar todas as células acima da célula focalizada na coluna.
Ctrl + Shift + Arrow Down para selecionar todas as células abaixo da célula focalizada na coluna.
Ctrl Arrow Left + Shift +para selecionar todas as células até o início da linha.
Ctrl + Shift + Arrow Right para selecionar todas as células até o final da linha.
Ctrl + Shift + Home para selecionar todas as células, desde a célula em foco até a primeira célula na grade
Ctrl + Shift + End para selecionar todas as células, desde a célula em foco até a última célula da grade

Note

A rolagem contínua só é possível dentro do corpo do Grid.

Api usage

Abaixo estão os métodos que você pode usar para selecionar intervalos, limpar a seleção ou obter dados de células selecionadas.

Select range

selectRange(range)- Selecione um intervalo de células com a API. rowStart e rowEnd deve usar índices de linha e columnStart e columnEnd pode usar índice de coluna ou valor de campo de dados de coluna.

const range = { rowStart: 2, rowEnd: 2, columnStart: 1, columnEnd: 1 };
this.grid1.selectRange(range);
...

const range = { rowStart: 0, rowEnd: 2, columnStart: 'Name', columnEnd: 'ParentID' };
this.grid1.selectRange(range);

Note

Selecionar intervalo é uma operação aditiva. Isso não limpará sua seleção anterior.

Clear cell selection

clearCellSelection() limpará a seleção de célula atual.

Get selected data

getSelectedData() retornará a matriz dos dados selecionados no formato, dependendo da seleção. Exemplos abaixo:

Se três células individuais diferentes forem selecionadas:

expectedData = [
    { CompanyName: 'Infragistics' },
    { Name: 'Michael Langdon' },
    { ParentID: 147 }
];

Se três células de uma coluna forem selecionadas:

expectedData = [
    { Address: 'Obere Str. 57'},
    { Address: 'Avda. de la Constitución 2222'},
    { Address: 'Mataderos 2312'}
];

Se três células forem selecionadas com o arrastar do mouse de uma linha e três colunas:

expectedData = [
    { Address: 'Avda. de la Constitución 2222', City: 'México D.F.', ContactTitle: 'Owner' }
];

Se três células forem selecionadas com o mouse arrastando de duas linhas e três colunas:

expectedData = [
    { ContactTitle: 'Sales Agent', Address: 'Cerrito 333', City: 'Buenos Aires'},
    { ContactTitle: 'Marketing Manager', Address: 'Sierras de Granada 9993', City: 'México D.F.'}
];

Se dois intervalos diferentes forem selecionados:

expectedData = [
    { ContactName: 'Martín Sommer', ContactTitle: 'Owner'},
    { ContactName: 'Laurence Lebihan', ContactTitle: 'Owner'},
    { Address: '23 Tsawassen Blvd.', City: 'Tsawassen'},
    { Address: 'Fauntleroy Circus', City: 'London'}
];

Se dois intervalos sobrepostos forem selecionados, o formato será:

expectedData = [
    { ContactName: 'Diego Roel', ContactTitle: 'Accounting Manager', Address: 'C/ Moralzarzal, 86'},
    { ContactName: 'Martine Rancé', ContactTitle: 'Assistant Sales Agent', Address: '184, chaussée de Tournai', City: 'Lille'},
    { ContactName: 'Maria Larsson', ContactTitle: 'Owner', Address: 'Åkergatan 24', City: 'Bräcke'},
    { ContactTitle: 'Marketing Manager', Address: 'Berliner Platz 43', City: 'München'}
];

Note

selectedCells() retornará células de todas as linhas visíveis (linhas na porta de exibição da grade) e de todas as colunas, incluindo colunas que estão fora da exibição. getSelectedData() também retornará os dados da célula selecionada. getSelectedRanges(): GridSelectionRange[] retornará os intervalos selecionados atuais na grade das interações do teclado e do ponteiro. O tipo é GridSelectionRange[].

Features integration

A seleção de múltiplas células é baseada em índice (seleção de elementos DOM).

Sorting- Quando a classificação é realizada, a seleção não será apagada. Ela deixará as células selecionadas atualmente as mesmas ao classificar em ordem crescente ou decrescente.
Paging- Na paginação, as células selecionadas serão limpas. A seleção não será persistida entre as páginas.
Filtering- Quando a filtragem é realizada, a seleção não será apagada. Se a filtragem for apagada, ela retornará - as células selecionadas inicialmente.
Resizing- Ao redimensionar uma coluna, as células selecionadas não serão apagadas.
Hiding- Não limpará as células selecionadas. Se a coluna estiver oculta, as células da próxima coluna visível serão selecionadas.
Pinning- A célula selecionada não será apagada. O mesmo que esconder
Group by- No agrupamento de colunas, as células selecionadas não serão desmarcadas.

Estilização

O mecanismo de tema expõe propriedades que nos permitem estilizar o intervalo de células selecionadas.

Import theme

Para começar a estilizar a seleção, precisamos importar o index arquivo, onde todas as funções do tema e mixins de componentes vivem:

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

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

Define colors

Uma vez feito isso, podemos fazer uso das contrast-color funções e color. Com eles, definimos as cores que gostaríamos de usar para nossa linha de seleção:

$text-color: contrast-color($color: 'primary', $variant: 900);
$background-color: color($color: "primary", $variant: 900);
$border-yellow: #f2c43c;

Note

Se não quisermos usar as contrast-color funções and color, sempre podemos codificar os valores de cor.

Create custom theme

Em seguida, criamos um novo tema que estende o grid-theme passando nosso text-color, background-color e border-yellow variáveis como $cell-selected-text-color, $cell-selected-background e $cell-active-border-color respectivamente:

$custom-grid-theme: grid-theme(
  $cell-selected-text-color: $text-color,
  $cell-active-border-color: $border-yellow,
  $cell-selected-background: $background-color
);

Apply theme

Depois, tudo o que precisamos fazer é incluir o mixin no estilo do nosso componente (também pode estar nos estilos do aplicativo), para que nosso igx-grid use o tema recém-criado em vez do padrão:

@include css-vars($custom-grid-theme);

Com o tema personalizado aplicado, as células de grade selecionadas são destacadas com nossas cores selecionadas:

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.

Angular Seleção de células

Angular Cell Selection Example

Selection types

Grid Multiple-cell Selection

Demo

Grid Single Selection

Note

Grid None selection

Keyboard navigation interactions

While Shift key is pressed

While Ctrl + Shift keys are pressed

Note

Api usage

Select range

Note

Clear cell selection

Get selected data

Note

Features integration

Estilização

Import theme

Define colors

Note

Create custom theme

Apply theme

Demo

Note

API References

Additional Resources

Temas