Selección de cuadrícula jerárquica Angular

    Con Ignite UI for Angular cuadrícula jerárquica, puede seleccionar datos fácilmente mediante el uso de una variedad de eventos, una API enriquecida o con interacciones simples del mouse como la selección única.

    Angular Grid 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.

    Angular Grid Selection Options

    IgniteUI for Angular Hierarchical Grid component provides three different selection modes - Row selection, Cell selection and Column selection. By default only Multi-cell selection mode is enabled in the Hierarchical Grid. In order to change/enable selection mode you can use rowSelection, cellSelection or selectable properties.

    Angular Row Selection

    PropiedadrowSelection te permite especificar las siguientes opciones:

    • none: la selección de filas estaría deshabilitada para la cuadrícula jerárquica
    • single: la selección de solo una fila dentro de la cuadrícula jerárquica estaría disponible
    • múltiple - La selección multi-fila estaría disponible usando elRow selectors, con una combinación de teclas como ctrl + click, o pulsando el space key una vez que una celda está enfocada

    Vaya al tema Selección de filas para obtener más información.

    Angular Cell Selection

    PropiedadcellSelection te permite especificar las siguientes opciones:

    • ninguno: la selección de celdas estaría deshabilitada para la cuadrícula jerárquica
    • único: la selección de solo una celda dentro de la cuadrícula jerárquica estaría disponible.
    • múltiple: actualmente, este es el estado predeterminado de la selección en la cuadrícula jerárquica. La selección de varias celdas está disponible arrastrando el mouse sobre las celdas, después de hacer clic continuamente con el botón izquierdo del mouse.

    Vaya al tema Selección de celda para obtener más información.

    Angular Column Selection

    Laselectable propiedad te permite especificar las siguientes opciones para cada columna:

    • falso: la selección de la columna correspondiente se desactivará para la cuadrícula jerárquica
    • verdadero: la selección de columna correspondiente se habilitará para la cuadrícula jerárquica
    • Esto lleva a las siguientes tres variaciones:
    • Selección única: haga clic con el mouse sobre la celda de la columna.
    • Selección de varias columnas: mantenga presionado Ctrl + clic del mouse sobre las celdas de la columna.
    • Selección de columnas de rango: mantener presionada la tecla Mayús + clic del mouse selecciona todo lo que se encuentra en el medio.

    Vaya al tema Selección de columnas para obtener más información.

    Known Issues and Limitations

    • El uso de la cuadrícula jerárquica con la selección habilitada en IE11 requiere la importación explícita de la matriz polyfill en polyfill.ts de la aplicación angular. IE11 ya no es compatible a partir de la versión 13.0.0.

      import 'core-js/es7/array';

    • Cuando la cuadrícula noprimaryKey tiene un sistema fijo y los escenarios de datos remotos están habilitados (al paginar, ordenar, filtrar o desplazar las solicitudes de disparo a un servidor remoto para recuperar los datos que se mostrarán en la cuadrícula), una fila perderá el siguiente estado tras completar una solicitud de datos:

      • Selección de fila
      • Fila Expandir/contraer
      • Edición de filas
      • Fijación de filas

    API References

    Additional Resources

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