Cuadrícula jerárquica

    Utilice el componente de cuadrícula jerárquica para permitir que el usuario examine e interactúe con una gran cantidad de datos complejos organizados en tablas separadas relacionadas jerárquicamente entre sí. Cada cuadrícula de la jerarquía representa sus propios datos de forma tabular y proporciona las mismas características que la cuadrícula. La cuadrícula jerárquica es visualmente idéntica al componente de cuadrícula jerárquica Ignite UI for Angular

    Hierarchical Grid Demo

    Using the Hierarchical Grid in Figma

    De manera similar a la cuadrícula, la cuadrícula jerárquica es esencialmente un repetidor de columnas, filas y cuadrículas anidadas que forman una jerarquía visual. Para utilizar el componente Cuadrícula jerárquica, simplemente búsquelo en el panel Recursos e inserte una instancia. Si es necesario, puede cambiar el tamaño utilizando la Size propiedad del panel de propiedades. En el panel de capas verás la siguiente estructura:

    Capa Usar
    🚫 versión del componente Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa contiene información sobre la versión actual del componente y debe evitar eliminarla o modificarla.
    🚫 metadatos Una capa bloqueada especial que comienza con un ícono prohibido. Esta capa es necesaria para la generación de código y debes evitar eliminarla o modificarla.
    Indicación de taladro Un símbolo que se utiliza para indicar la celda activa/celda enfocada.
    Cuadrícula 2 Contains all the columns and cells of the bottom grid
    Fondo Define el color de fondo de la segunda cuadrícula.
    Cuadrícula 1 Contiene todas las columnas y celdas de la cuadrícula superior.

    Si desea modificar la cantidad de columnas o celdas, simplemente puede ocultar las innecesarias del panel de capas. En caso de que desee agregar más, deberá seleccionar el componente Cuadrícula jerárquica, hacer clic derecho sobre él y seleccionar "Separar instancia" en el menú contextual. Luego puede duplicar algunas de las columnas existentes hasta lograr el aspecto deseado de la cuadrícula. Si desea mostrar más jerarquía, también puede duplicar uno de los dos marcos de cuadrícula.

    Cell Types

    La cuadrícula jerárquica amplía los tres tipos de celdas de cuadrícula normales: encabezado, cuerpo y resumen con dos adicionales que se utilizan para organizar la jerarquía. La celda CollapseAll siempre se usa como la primera celda de encabezado y viene con un ícono predefinido y una acción para contraer/expandir todos los registros pertenecientes a la cuadrícula en cuyo encabezado aparece. La celda Expandir siempre se usa como la primera celda del cuerpo en cada fila y viene con un ícono predefinido y una acción para contraer/expandir la fila.

    Para comprender cómo se pueden usar las celdas regulares de encabezado, cuerpo y resumen para diferentes tipos de datos y configurarlas para habilitar las diversas funciones de cuadrícula jerárquica, consulte el tema general de cuadrícula.

    Cell Size

    The CollapseAll and Expand cells support three size variants of the Hierarchical Grid: Large, Medium and Small, which can be changed from the Size property in the side properties panel.

    Estilismo

    La cuadrícula jerárquica ofrece flexibilidad de estilo que se puede lograr aplicando estilos al texto de las celdas individuales, los iconos y los colores de fondo en los distintos estados disponibles, así como ocultando los bordes horizontales y verticales. También es posible aplicar estilo a la indicación de perforación y al fondo de la cuadrícula.

    Usage

    De manera similar a la Cuadrícula, lo más importante de la Cuadrícula Jerárquica es la alineación de los datos dentro de sus Celdas de Encabezado y Cuerpo. El texto siempre debe estar alineado a la izquierda, dejando un espacio vacío variable a la derecha, y los números siempre deben estar alineados a la derecha, dejando un espacio vacío variable a la izquierda.

    Hacer No

    Additional Resources

    Temas relacionados:

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