Cómo mostrar datos de detalles a petición en una cuadrícula jerárquica

​A diferencia de una cuadrícula maestro-detalle tradicional, que requiere instalación y configuración manuales, la cuadrícula jerárquica de Ignite UI for Angular maneja automáticamente las relaciones de datos padre-hijo listas para usar. Está diseñado para la simplicidad, lo que le permite explorar datos anidados a través de filas expandibles con una configuración mínima.

Una de las mejores cosas es que puede expandir y contraer datos jerárquicos sin esfuerzo sin codificación adicional, lo que le ahorra horas de trabajo. Para guiarlo a través de todo el proceso de visualización de datos detallados bajo demanda, describimos los pasos necesarios en esta publicación de blog instructiva. También hay fragmentos de código y demostraciones para agilizar aún más el ciclo de desarrollo.

Let’s get started. 

¿Por qué usar una cuadrícula jerárquica?

La cuadrícula jerárquica es ideal para trabajar con estructuras de datos relacionales o anidadas que contienen naturalmente varios niveles. Administra automáticamente cómo se muestran los registros secundarios, proporcionando un comportamiento integrado de expansión / contracción para cada nivel de jerarquía. Esto significa menos configuración manual y más enfoque en sus datos.

Perfecto para:

• Relaciones padre-hijo (por ejemplo, categorías → productos → pedidos)
• Multi-level nested datasets 
• Modelos de datos que reflejan jerarquías del mundo real

En comparación con una configuración maestro-detalle, la cuadrícula jerárquica generalmente necesita mucha menos configuración y lógica, especialmente cuando sus datos ya siguen una jerarquía natural.
Sin embargo, para conjuntos de datos únicos o no relacionados, un diseño maestro-detalle puede ser la mejor opción.

Escenarios de datos donde la cuadrícula jerárquica brilla

A continuación puedes echar un vistazo a varios ejemplos prácticos.

• Nested relational data — e.g. Customers → Orders → Order Details 
• Estructuras en forma de árbol, por ejemplo, la empresa → departamentos → empleados
• Informes detallados, por ejemplo, regiones → países → ventas

[ 
  { 
    "Category": "Beverages", 
    "Products": [ 
      { 
        "ProductName": "Chai", 
        "Orders": [ 
          { "OrderID": 10248, "Quantity": 15 }, 
          { "OrderID": 10249, "Quantity": 10 } 
        ] 
      }, 
      { 
        "ProductName": "Chang", 
        "Orders": [ 
          { "OrderID": 10250, "Quantity": 20 } 
        ] 
      } 
    ] 
  } 
]

Explorando la carga de datos bajo demanda

Una de las características más útiles de la cuadrícula jerárquica es la carga de datos bajo demanda. Los detalles solo se cargan cuando el usuario expande una fila, en lugar de todos a la vez. Como resultado, obtienes:

• Tiempos de carga iniciales más rápidos (especialmente con conjuntos de datos grandes).
• Reduced memory usage. 
• Experiencia de usuario más fluida: los usuarios solo ven lo que quieren cuando lo necesitan.

Para conjuntos de datos muy grandes, también puede habilitar la virtualización de filas y columnas, lo que garantiza que solo se representen los registros visibles. Este mecanismo incorporado hace que la red sea altamente eficiente para aplicaciones de datos a gran escala.

Aquí hay un ejemplo. Imagina que tienes una tabla de clientes con miles de registros, y cada cliente puede tener varios pedidos. La cuadrícula principal está enlazada al punto de conexión /customers, que devuelve la lista de clientes. Cuando un usuario expande una fila de cliente específica, la cuadrícula jerárquica carga dinámicamente los pedidos relacionados llamando al extremo /customers/{id}/orders, donde {id} es el identificador del registro de cliente expandido.

<igx-hierarchical-grid 
  [data]="northwindSwaggerCategoryDto" 
  primaryKey="categoryId" 
  [allowFiltering]="true" 
  filterMode="excelStyleFilter" 
  class="hierarchical-grid"> 
  <!-- Category columns --> 
  <igx-column field="categoryId" dataType="number" header="categoryId" [filterable]="true" [sortable]="true"></igx-column> 
  <igx-column field="name" dataType="string" header="name" [filterable]="true" [sortable]="true"></igx-column> 
  <igx-column field="description" dataType="string" header="description" [filterable]="true" [sortable]="true"></igx-column> 
  <!-- Products Row Island --> 
  <igx-row-island primaryKey="productId" (gridCreated)="gridCreatedProductDto($event)"> 
    <igx-column field="productId" dataType="number" header="productId"></igx-column> 
    <igx-column field="productName" dataType="string" header="productName"></igx-column> 
    <igx-column field="supplierId" dataType="number" header="supplierId"></igx-column> 
    <igx-column field="categoryId" dataType="number" header="categoryId"></igx-column> 
    <igx-column field="quantityPerUnit" dataType="string" header="quantityPerUnit"></igx-column> 
  </igx-row-island> 
</igx-hierarchical-grid> 

// Load child grid data (products) dynamically when a category is expanded 
  public onProductsGridCreated(event: IGridCreatedEventArgs): void { 
    event.grid.isLoading = true; 
    const categoryId = event.parentRowData?.categoryId; 
    this.http.get<any[]>(`/api/categories/${categoryId}/products`).subscribe(data => { 
      event.grid.data = data; 
      event.grid.isLoading = false; 
    }); 
  } 

Mínimo de montaje necesario

Otra gran cosa es la configuración que es intencionalmente liviana. Si sus datos ya están organizados en niveles anidados, todo funciona de inmediato. En el caso de las fuentes de datos remotas, puede cargar registros secundarios a petición cuando los usuarios expanden una fila, sin necesidad de recuperar todo por adelantado.

Ejemplo:

<igx-hierarchical-grid [data]="categories" primaryKey="Category" class="hierarchical-grid"> 
  <igx-row-island key="Products" primaryKey="ProductName"> 
    <igx-row-island key="Orders" primaryKey="OrderID"> 
      <igx-column field="OrderID" header="Order ID"></igx-column> 
      <igx-column field="Quantity" header="Quantity"></igx-column> 
    </igx-row-island> 
    <igx-column field="ProductName" header="Product"></igx-column> 
  </igx-row-island> 
  <igx-column field="Category" header="Category"></igx-column> 
</igx-hierarchical-grid> 

Los datos anidados se revelan solo cuando se expanden (como se muestra en la imagen a continuación).

¿Cuándo usar la cuadrícula jerárquica frente al detalle maestro?

La elección entre una cuadrícula jerárquica y una cuadrícula maestro-detalle depende de la estructura de datos, los requisitos de rendimiento y la cantidad de personalización que necesite.

La cuadrícula jerárquica es mejor para datos anidados de forma natural con relaciones claras entre elementos primarios y secundarios.

Advantages: 

• Minimal setup and maintenance. 
• Soporte integrado para múltiples niveles de jerarquía.
• Optimizado para el rendimiento con carga diferida (bajo demanda).
• UX uniforme para expandir/contraer filas en cualquier nivel.

La cuadrícula maestro-detalle es más flexible si los detalles provienen de fuentes separadas o conjuntos de datos no relacionados.

Advantages: 

• Diseños y plantillas de contenido altamente personalizables.
• Ideal cuando cada nivel de detalle es único o no repetitivo.
• Admite la integración con otros componentes (gráficos, formularios, mapas, etc.).
• Ofrece un control granular sobre cuándo y cómo se cargan los datos.

Nota: Coloque la cuadrícula jerárquica como una solución "plug-and-play" para estructuras jerárquicas.

Envolver...

Si los datos están intrínsecamente anidados, la cuadrícula jerárquica es la forma más fácil y eficaz de visualizarlos.
Sin embargo, incluso cuando los datos proceden de puntos de conexión independientes, puede aprovechar sus capacidades de carga de datos a petición para mostrar conjuntos de datos relacionados de forma dinámica, por ejemplo, cargar registros secundarios como customers → customers/{id}/orders → orders/{id}/orderDetails solo cuando se expande una fila.

Para diseños no relacionados o totalmente personalizados, consulte nuestra guía de cuadrícula de detalles maestros para comparar ambos enfoques.