Selección de celdas Angular

    La función de selección habilita capacidades de selección de datos enriquecidos en la cuadrícula jerárquica basada en la interfaz de usuario de material. 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. La cuadrícula jerárquica ahora admite tres modos de 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. En la cuadrícula jerárquica puede especificar el modo de selección de celdas en el nivel de la cuadrícula. Entonces, por ejemplo, en la cuadrícula principal se puede habilitar la selección de varias celdas, pero en las cuadrículas secundarias el modo de selección de celdas puede ser único o deshabilitado. 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 Hierarchical 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

    Hierarchical Grid Multiple-cell Selection

    Este es el modo de selección de celda predeterminado tanto en la cuadrícula principal como en la secundaria. Tenga en cuenta que puede realizar la selección de celdas en una cuadrícula a la vez, no puede realizar una selección de rango cruzado de cuadrículas ni tener celdas seleccionadas en varias cuadrículas. Cada combinación de teclas relacionada con la selección de rango y la funcionalidad de arrastre del mouse solo se puede usar en la misma cuadrícula.

    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.

    Hierarchical 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.

    Hierarchical 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.

    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-hierarchical-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:

    Demo

    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.