Angular Seleção de células

    The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Hierarchical Grid now supports three modes for cell selection, and you can easily switch between them by changing cellSelection property. You can disable cell selection, you can select only one cell within the grid or to select multiple cells in the grid, which is provided as default option. In the Hierarchical Grid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled. But let's dive deeper in each of these options.

    Angular Cell Selection Example

    O exemplo abaixo demonstra os três tipos de comportamento de seleção de células da Grade Hierárquica. 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

    Hierarchical Grid Multiple-cell Selection

    Este é o modo de seleção de célula padrão nas grades pai e filho. Lembre-se de que você pode fazer a seleção de células uma grade de cada vez, não pode fazer a seleção de intervalo de grade cruzada ou ter células selecionadas em várias grades. Cada combinação de teclas relacionada à seleção de intervalo e à funcionalidade de arrastar do mouse pode ser usada apenas na mesma grade.

    Como selecionar células:

    • By Mouse drag - Rectangular data selection of cells would be performed.
    • By Ctrl key press + Mouse drag - Multiple range selections would be performed. Any other existing cell selection will be persisted.
    • Instant multi-cell selection by using Shift key. Select single cell and select another single cell by holding the Shift key. Cell range between the two cells will be selected. Keep in mind that if another second cell is selected while holding Shift key the cell selection range will be updated based on the first selected cell position (starting point).
    • Keyboard multi-cell selection by using the Arrow keys while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Keyboard multi-cell selection by using the Ctrl + Arrow keys and Ctrl + Home/End while holding Shift key. Multi-cell selection range will be created based on the focused cell.
    • Clicking with the Left Mouse key while holding Ctrl key will add single cell ranges into the selected cells collection.
    • A seleção contínua de múltiplas células está disponível clicando com o mouse e arrastando.

    Hierarchical Grid Single Selection

    When you set the [cellSelection]="'single'", this allows you to have only one selected cell in the grid at a time. Also the mode mouse drag will not work and instead of selecting a cell, this will make default text selection.

    Note

    When single cell is selected selected event is emitted, no matter if the selection mode is single or multiple. In multi-cell selection mode when you select a range of cells rangeSelected event is emitted.

    Hierarchical Grid None selection

    If you want to disable cell selection you can just set [cellSelection]="'none'" property. In this mode when you click over the cell or try to navigate with keyboard, the cell is not selected, only the activation style is applied and it is going to be lost when you scroll or click over other element on the page. The only way for you to define selection is by using the API methods that are described below.

    Estilização

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

    Import theme

    To get started with styling the selection, we need to import the index file, where all the theme functions and component mixins live:

    @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

    Once done, we can make use of the contrast-color and color functions. With them, we define the colors we would like to use for our selection range:

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

    If we don't want to use the contrast-color and color functions, we can always hardcode the color values.

    Create custom theme

    Next we create a new theme that extends the grid-theme passing our text-color, background-color and border-yellow variables as $cell-selected-text-color, $cell-selected-background and $cell-active-border-color, respectively:

    $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-hierarchical-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 pelo tema global selecionado deChange Theme.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.