Como exibir dados de detalhes sob demanda em uma grade hierárquica

Ao contrário de uma grade mestre-detalhe tradicional, que requer instalação e configuração manuais, a grade hierárquica do Ignite UI for Angular lida automaticamente com relacionamentos de dados pai-filho prontos para uso. Ele foi projetado para simplicidade, permitindo que você explore dados aninhados por meio de linhas expansíveis com configuração mínima.

Uma das melhores coisas é que você pode expandir e recolher dados hierárquicos sem esforço, sem codificação extra, economizando horas de trabalho. Para guiá-lo por todo o processo de exibição de dados detalhados sob demanda, descrevemos as etapas necessárias nesta postagem do blog de instruções. Há também trechos de código e demonstrações para simplificar ainda mais o ciclo de desenvolvimento.

Let’s get started. 

Por que usar uma grade hierárquica?

A Grade Hierárquica é ideal para trabalhar com estruturas de dados relacionais ou aninhadas que naturalmente contêm vários níveis. Ele gerencia automaticamente como os registros filho são exibidos, fornecendo comportamento interno de expandir/recolher para cada nível de hierarquia. Isso significa menos configuração manual e mais foco em seus dados.

Perfeito para:

• Relacionamentos pai-filho (por exemplo, Categorias → Produtos → Pedidos)
• Multi-level nested datasets 
• Modelos de dados que espelham hierarquias do mundo real

Em comparação com uma configuração mestre-detalhe, a grade hierárquica geralmente precisa de muito menos configuração e lógica, especialmente quando seus dados já seguem uma hierarquia natural.
No entanto, para conjuntos de dados exclusivos ou não relacionados, um layout Master-Detail ainda pode ser o mais adequado.

Cenários de Dados onde a Grade Hierárquica Brilha

Abaixo você pode dar uma olhada em vários exemplos práticos.

• Nested relational data — e.g. Customers → Orders → Order Details 
• Estruturas semelhantes a árvores — por exemplo, empresa → departamentos → funcionários
• Relatórios detalhados — por exemplo, regiões → países → vendas

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

Explorando o Carregamento de Dados sob Demanda

Um dos recursos mais úteis da Grade Hierárquica é o carregamento de dados sob demanda. Os detalhes são carregados somente quando o usuário expande uma linha, em vez de todos de uma vez. Como resultado, você obtém:

• Tempos de carregamento iniciais mais rápidos (especialmente com grandes conjuntos de dados).
• Reduced memory usage. 
• Experiência de usuário mais suave – os usuários só veem o que querem quando precisam.

Para conjuntos de dados muito grandes, você também pode habilitar a virtualização de linhas e colunas, o que garante que apenas os registros visíveis sejam renderizados. Esse mecanismo integrado torna a grade altamente eficiente para aplicativos de dados em larga escala.

Aqui está um exemplo. Imagine que você tem uma tabela Clientes com milhares de registros e cada cliente pode ter vários Pedidos. A grade principal está associada ao ponto de extremidade /customers, que retorna a lista de clientes. Quando um usuário expande uma linha de cliente específica, a Grade Hierárquica carrega dinamicamente os pedidos relacionados chamando o ponto de extremidade /customers/{id}/orders, em que {id} é o identificador do 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; 
    }); 
  } 

Configuração mínima necessária

Outra grande coisa é a configuração que é intencionalmente leve. Se seus dados já estiverem organizados em níveis aninhados, tudo funcionará imediatamente. Para fontes de dados remotas, você pode carregar registros filho sob demanda quando os usuários expandem uma linha — não há necessidade de buscar tudo antecipadamente.

Exemplo:

<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> 

Os dados aninhados são revelados somente quando expandidos (conforme ilustrado na imagem abaixo).

Quando usar Grade Hierárquica vs Master-Detail?

A escolha entre uma grade hierárquica e uma grade mestre-detalhe depende da estrutura de dados, dos requisitos de desempenho e da quantidade de personalização necessária.

A Grade Hierárquica é melhor para dados aninhados naturalmente com relacionamentos pai-filho claros.

Advantages: 

• Minimal setup and maintenance. 
• Suporte integrado para vários níveis de hierarquia.
• Otimizado para desempenho com carregamento lento (sob demanda).
• UX uniforme para expandir/recolher linhas em qualquer nível.

A grade mestre-detalhe é mais flexível se os detalhes vierem de fontes separadas ou conjuntos de dados não relacionados.

Advantages: 

• Layouts e modelos de conteúdo altamente personalizáveis.
• Ideal quando cada nível de detalhe é único ou não repetitivo.
• Suporta integração com outros componentes (gráficos, formulários, mapas, etc.).
• Oferece controle granular sobre quando e como os dados são carregados.

Observação: posicione a grade hierárquica como uma solução "plug-and-play" para estruturas hierárquicas.

Embrulhar...

Se seus dados estiverem inerentemente aninhados, a Grade Hierárquica será a maneira mais fácil e eficiente de visualizá-los.
No entanto, mesmo quando seus dados vêm de endpoints separados, você ainda pode aproveitar seus recursos de carregamento de dados sob demanda para exibir conjuntos de dados relacionados dinamicamente — por exemplo, carregando registros filhos como clientes → clientes/{id}/pedidos → pedidos/{id}/orderDetails somente quando uma linha é expandida.

Para layouts não relacionados ou totalmente personalizados, confira nosso guia Master-Detail Grid para comparar as duas abordagens.