Selección de celdas Angular

    The selection feature enables rich data select capabilities in the Material UI based Hierarchical Grid. Variety of events and single select actions are available thanks to the powerful API and easy to use methods. The Hierarchical 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. In the Hierarchical Grid you can specify the cell selection mode on grid level. So for example in the parent grid multi-cell selection can be enabled, but in child grids cell selection mode can be single or disabled. 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 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.