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.

    Ejemplo de selección de celdas Angular

    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.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

    Tipos de selección

    Selección de múltiples celdas de cuadrícula jerárquica

    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.

    Selección única de cuadrícula jerárquica

    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.

    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.

    Cuadrícula jerárquica Ninguna selección

    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.

    Estilo

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

    Importar tema

    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';
scss

    Definir colores

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

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

    Si no queremos usar las contrast-color funciones y color, siempre podemos codificar los valores de color.

    Crear tema personalizado

    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
);
scss

    Aplicar tema

    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);
scss

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

    Manifestación

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

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

    Referencias de API

    App Builder | CTA Banner

    Recursos adicionales

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