Selección de celdas Angular

    The selection feature enables rich data select capabilities in the Material UI based Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The 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. But let's dive deeper in each of these options.

    Angular Cell Selection Example

    El siguiente ejemplo demuestra los tres tipos de comportamiento de selección de celdas de Grid. Utilice los botones a continuación para habilitar cada uno de los modos de selección disponibles. Se proporcionará una breve descripción de cada interacción de botón a través de un cuadro de mensaje de snackbar.

    Selection types

    Grid Multiple-cell Selection

    Cómo seleccionar celdas:

    • 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.
    • La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.

    Manifestación

    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.

    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.

    Keyboard navigation interactions

    While Shift key is pressed

    • Mayús + Flecha arriba para agregar la celda anterior a la selección actual.
    • Mayús + Flecha hacia abajo para agregar la siguiente celda a la selección actual.
    • Mayús + Flecha izquierda para agregar la celda izquierda a la selección actual.
    • Mayús + Flecha derecha para agregar la celda derecha a la selección actual.

    While Ctrl + Shift keys are pressed

    • Ctrl + Mayús + Flecha arriba para seleccionar todas las celdas encima de la celda enfocada en la columna.
    • Ctrl + Mayús + Flecha hacia abajo para seleccionar todas las celdas debajo de la celda enfocada en la columna.
    • Ctrl + Shift + Flecha izquierda para seleccionar todas las celdas hasta el inicio de la fila.
    • Ctrl + Shift + Flecha derecha para seleccionar todas las celdas hasta el final de la fila.
    • Ctrl + Shift + Inicio para seleccionar todas las celdas desde la celda enfocada hasta la primera celda de la cuadrícula
    • Ctrl + Shift + Fin para seleccionar todas las celdas desde la celda enfocada hasta la última celda de la cuadrícula
    Note

    El desplazamiento continuo sólo es posible dentro del cuerpo de Grid.

    Api usage

    A continuación se detallan los métodos que puede utilizar para seleccionar rangos, borrar la selección u obtener datos de celdas seleccionadas.

    Select range

    selectRange(range) - Select a range of cells with the API. rowStart and rowEnd should use row indexes and columnStart and columnEnd could use column index or column data field value.

    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

    El rango seleccionado es operación aditiva. No borrará su selección anterior.

    Clear cell selection

    clearCellSelection() will clear the current cell selection.

    Get selected data

    getSelectedData() will return array of the selected data in format depending on the selection. Examples below:

    1. Si se seleccionan tres celdas individuales diferentes:

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

    2. Si se seleccionan tres celdas de una columna:

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

    3. Si se seleccionan tres celdas arrastrando el mouse desde una fila y tres columnas:

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

    4. Si se seleccionan tres celdas arrastrando el mouse desde dos filas y tres columnas:

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

    5. Si se seleccionan dos rangos diferentes:

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

    6. Si se seleccionan dos rangos superpuestos, el formato sería:

      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() will return cells from all visible rows (rows in the grid's view port) and from all columns, including columns that are out of view. getSelectedData() will also return the selected cell data. getSelectedRanges(): GridSelectionRange[] will return the current selected ranges in the grid from both keyboard and pointer interactions. The type is GridSelectionRange[].

    Features integration

    La selección de varias celdas se basa en índices (selección de elementos DOM).

    • Sorting - When sorting is performed selection will not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
    • Paging - On paging selected cells will be cleared. Selection wont be persisted across pages.
    • Filtering - When filtering is performed selection will not be cleared. If filtering is cleared it will return - the initially selected cells.
    • Resizing - On column resizing selected cells will not be cleared.
    • Hiding - It will not clear the selected cells. If column is hidden, the cells from the next visible column will be selected.
    • Pinning - Selected cell will not be cleared. Same as hiding
    • Group by - On column grouping selected cells will not be cleared.

    Estilismo

    El motor del tema expone propiedades que nos permiten estilizar el rango de celdas seleccionadas.

    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

    Después, todo lo que tenemos que hacer es incluir el mixin en el estilo de nuestro componente (también podría estar en los estilos de la aplicación), para que nuestro igx-grid use el tema recién creado en lugar del predeterminado:

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

    Con el tema personalizado aplicado, las celdas de la cuadrícula seleccionadas se resaltan con nuestros colores seleccionados:

    Manifestación

    Note

    The sample will not be affected by the selected global theme from Change Theme.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.