Selección de celdas Angular

La función de selección habilita capacidades de selección de datos enriquecidos en la cuadrícula basada en la interfaz de usuario de materiales. Una variedad de eventos y acciones de selección única están disponibles gracias a la potente API y a los métodos fáciles de usar. Grid ahora admite tres modos para la selección de celdas y puede cambiar fácilmente entre ellos cambiando la propiedad cellSelection. Puede deshabilitar la selección de celdas, puede seleccionar solo una celda dentro de la cuadrícula o seleccionar varias celdas en la cuadrícula, que se proporciona como opción predeterminada. Pero profundicemos en cada una de estas opciones.

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:

Mouse drag: se realizará la selección de datos rectangulares de las celdas.
Al presionar Ctrl key + Mouse drag: se realizarán selecciones de rango múltiple. Cualquier otra selección de celda existente se mantendrá.
Selección instantánea de varias celdas mediante la tecla Shift. Seleccione una sola celda y seleccione otra celda manteniendo presionada la tecla Mayús. Se seleccionará el rango de celdas entre las dos celdas. Tenga en cuenta que si se selecciona otra segunda celda mientras se mantiene presionada Shift key el rango de selección de celdas se actualizará en función de la posición de la primera celda seleccionada (punto de partida).
Selección de varias celdas del teclado utilizando las Arrow keys mientras mantiene presionada Shift key. Se creará un rango de selección de varias celdas en función de la celda enfocada.
Selección de varias celdas del teclado usando Ctrl + Arrow keys y Ctrl + Home/End mientras mantiene presionada Shift key. Se creará un rango de selección de varias celdas en función de la celda enfocada.
Al hacer clic con la Left Mouse key mientras mantiene presionada Ctrl key, se agregarán rangos de celdas individuales a la colección de celdas seleccionadas.
La selección continua de múltiples celdas está disponible haciendo clic con el mouse y arrastrando.

Manifestación

Grid Single Selection

Cuando configura [cellSelection]="'single'", esto le permite tener solo una celda seleccionada en la cuadrícula a la vez. Además, el modo mouse drag no funcionará y, en lugar de seleccionar una celda, se realizará la selección de texto predeterminada.

Note

Cuando se selecciona una sola celda, se emite el evento selected, sin importar si el selection mode es single o multiple. En el modo de selección de múltiples celdas, cuando selecciona un rango de celdas, se emite el evento rangeSelected.

Grid None selection

Si desea deshabilitar la selección de celdas, simplemente puede configurar la propiedad [cellSelection]="'none'". En este modo, cuando hace clic sobre la celda o intenta navegar con el teclado, la celda no se selecciona, solo se aplica el activation style y se perderá cuando se desplace o haga clic sobre otro elemento de la página. La única forma de definir la selección es mediante los métodos API que se describen a continuación.

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): selecciona un rango de celdas con la API. rowStart y rowEnd deberían usar índices de fila y columnStart y columnEnd podrían usar el índice de columna o el valor del campo de datos de la columna.

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() borrará la selección de celda actual.

Get selected data

getSelectedData() devolverá una matriz de los datos seleccionados en formato dependiendo de la selección. Ejemplos a continuación:

Si se seleccionan tres celdas individuales diferentes:

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

Si se seleccionan tres celdas de una columna:

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

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' }
];

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.'}
];

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'}
];

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() devolverá celdas de todas las filas visibles (filas en el puerto de visualización de la cuadrícula) y de todas las columnas, incluidas las columnas que no están a la vista. getSelectedData() también devolverá los datos de la celda seleccionada. getSelectedRanges(): GridSelectionRange[] devolverá los rangos seleccionados actualmente en la cuadrícula tanto desde las interacciones del teclado como del puntero. El tipo es GridSelectionRange[].

Features integration

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

Sorting: cuando se realiza la clasificación, la selección no se borrará. Dejará las celdas actualmente seleccionadas iguales mientras se ordenan de forma ascendente o descendente.
Paging: al paginar, las celdas seleccionadas se borrarán. La selección no persistirá en todas las páginas.
Filtering: cuando se realiza el filtrado, la selección no se borrará. Si se borra el filtrado, volverá a las celdas seleccionadas inicialmente.
Resizing: al cambiar el tamaño de la columna, las celdas seleccionadas no se borrarán.
Hiding: no borrará las celdas seleccionadas. Si la columna está oculta, se seleccionarán las celdas de la siguiente columna visible.
Pinning: la celda seleccionada no se borrará. Lo mismo que esconderse
Group by: en la agrupación de columnas, las celdas seleccionadas no se borrarán.

Styling Guidelines

El motor de temas expone propiedades que nos permiten diseñar el range of selected cells.

Import theme

Para comenzar a diseñar la selección, necesitamos importar el archivo index, donde se encuentran todas las funciones del tema y los mixins de componentes:

@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

Una vez hecho esto, podemos hacer uso de las funciones igx-contrast-color e igx-color. Con ellos definimos los colores que nos gustaría utilizar para nuestra gama de selección:

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

Create custom theme

A continuación creamos un nuevo tema que extiende el grid-theme pasando nuestras variables text-color, background-color y border-yellow como $cell-selected-text-color, $cell-selected-background y $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

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 grid($custom-grid-theme);

Note

Si el componente utiliza una Emulated ViewEncapsulation, es necesario penetrar esta encapsulación usando::ng-deep. Ajustamos el estilo en:host selector para no afectar ninguna otra grilla que podamos tener en nuestra aplicación.

   :host {
       ::ng-deep {
           @include grid($custom-grid-theme);
       }
   }

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

Manifestación

Note

La muestra no se verá afectada por el tema global seleccionado en Change Theme.

API References

Additional Resources

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

Selección de celdas Angular

Angular Cell Selection Example

Selection types

Grid Multiple-cell Selection

Manifestación

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

Styling Guidelines

Import theme

Define colors

Create custom theme

Apply theme

Note

Manifestación

Note

API References

Additional Resources

Tematización