Selección de celdas Angular

    La función de selección permite capacidades de selección de datos enriquecidos en la Hierarchical Grid basada en Material UI. Hay variedad de eventos y acciones de selección única gracias a la potente API y los métodos fáciles de usar. La Hierarchical Grid ahora soporta tres modos para la selección de celdas, y puedes cambiar fácilmente entre ellos cambiandocellSelection propiedad. Puedes desactivar la selección de celdas, solo puedes seleccionar una celda dentro de la cuadrícula o seleccionar varias celdas en la cuadrícula, que es la opción predeterminada. En la cuadrícula jerárquica puedes especificar el modo de selección de celdas a nivel de cuadrícula. Por ejemplo, en la cuadrícula principal se puede habilitar la selección de celdas múltiples, pero en las rejillas hijos, el modo de selección de celdas puede estar simple o desactivado. Pero vamos a profundizar 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:

    • MedianteMouse drag- Se realizaría una selección rectangular de las celdas.
    • AlCtrl key pulsar +Mouse drag- Se realizaban múltiples selecciones de rango. Cualquier otra selección celular existente se mantendrá en mando.
    • Selección instantánea de múltiples celdas usando la tecla Mays. Selecciona una sola celda y selecciona otra celda única manteniendo pulsada la tecla Mayús. Se seleccionará el rango de celdas entre las dos celdas. Ten en cuenta que si se selecciona otra segunda celda mientras se sostieneShift key, el rango de selección de celda se actualizará en función de la posición de la primera celda seleccionada (punto de inicio).
    • Selección multicelda del teclado usando elArrow keys mientras mantiene mantenidoShift key. Se creará un rango de selección multicelular basado en la célula enfocada.
    • Selección de múltiples celdas del teclado usando yCtrl + Arrow keys​Ctrl + Home/End mientras mantiene mantenidoShift key. Se creará un rango de selección multicelular basado en la célula enfocada.
    • Al hacer clic mientrasLeft Mouse key se mantiene pulsadoCtrl key se añadirá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 configuras el[cellSelection]="'single'", esto te permite tener solo una celda seleccionada en la cuadrícula a la vez. Además, el modomouse drag no funciona y, en vez de seleccionar una celda, esto hará que la selección de texto sea por defecto.

    Note

    Cuando se seleccionaselected una sola celda, se emite un evento, independientemente de si esselection mode​single omultiple En modo de selección multicelda, cuando seleccionas un rango de celdasrangeSelected, se emite un evento.

    Hierarchical Grid None selection

    Si quieres desactivar la selección de celdas, simplemente puedes establecer[cellSelection]="'none'" la propiedad. En este modo, cuando haces clic sobre la celda o intentas navegar con el teclado, la celda no está seleccionada, solo seactivation style aplica y se perderá al desplazarte o hacer clic sobre otro elemento de la página. La única forma de definir la selección es utilizando los métodos API que se describen a continuación.

    Estilismo

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

    Import theme

    Para empezar a estilizar la selección, necesitamos importar elindex archivo, donde están todas las funciones del tema y los componentes mezclados:

    @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, podemos utilizar lascontrast-color funciones ycolor. Con ellos, definimos los colores que queremos usar para nuestra gama de selección:

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

    Si no queremos usar lascontrast-color funciones ycolor, siempre podemos codificar los valores de color de forma fija.

    Create custom theme

    A continuación creamos un nuevo tema que extiende lasgrid-theme variables pasando nuestrotext-color,background-color yborder-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 css-vars($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 deChange Theme.

    API References

    Additional Resources

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