How to Display Details Data On Demand in a Hierarchical Grid 

Unlike a traditional Master-Detail Grid, which requires manual setup and configuration, the Hierarchical Grid from Ignite UI for Angular automatically handles parent-child data relationships out of the box. It’s designed for simplicity, allowing you to explore nested data through expandable rows with minimal setup. 

One of the best things is that you can expand and collapse hierarchical data effortlessly without extra coding, saving you hours of work. To guide you through the entire process of displaying detailed data on demand, we’ve outlined the necessary steps in this how-to blog post. There are also code snippets and demos to streamline the development cycle further. 

Let’s get started. 

Why Use a Hierarchical Grid? 

The Hierarchical Grid is ideal for working with relational or nested data structures that naturally contain multiple levels. It automatically manages how child records are displayed, providing built-in expand/collapse behavior for each level of hierarchy. This means less manual configuration and more focus on your data.  

Perfect for: 

• Parent-child relationships (e.g., Categories → Products → Orders) 
• Multi-level nested datasets 
• Data models that mirror real-world hierarchies 

Compared to a Master-Detail setup, the Hierarchical Grid usually needs much less setup and logic—especially when your data already follows a natural hierarchy. 
For unique or unrelated datasets, though, a Master-Detail layout may still be the better fit. 

Data Scenarios Where Hierarchical Grid Shines 

Below you can have a look at several practical examples. 

• Nested relational data — e.g. Customers → Orders → Order Details 
• Tree-like structures — e.g. Company → Departments → Employees 
• Drill-down reporting — e.g. Regions → Countries → Sales 

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

Exploring On-Demand Data Loading 

One of the Hierarchical Grid’s most useful features is on-demand data loading. Details are loaded only when the user expands a row, instead of all at once. As a result, you get: 

• Faster initial load times (especially with large datasets). 
• Reduced memory usage. 
• Smoother user experience – users only see what they want when they need it. 

For very large datasets, you can also enable row and column virtualization, which ensures only visible records are rendered. This built-in mechanism makes the grid highly efficient for large-scale data applications. 

Here’s an example. Imagine you have a Customers table with thousands of records, and each customer can have multiple Orders. The main grid is bound to the /customers endpoint, which returns the list of customers. When a user expands a specific customer row, the Hierarchical Grid dynamically loads the related orders by calling the /customers/{id}/orders endpoint, where {id} is the identifier of the expanded customer record. 

<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; 
    }); 
  } 

Minimal Setup Required  

Another great thing is the setup which is intentionally lightweight. If your data is already organized in nested levels, everything works right away. For remote data sources, you can load child records on-demand when users expand a row — no need to fetch everything upfront. 

Example: 

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

Nested data is revealed only when expanding (as depicted in the image below). 

When to Use Hierarchical Grid vs Master-Detail? 

Choosing between a Hierarchical Grid and a Master-Detail Grid depends on your data structure, performance requirements, and how much customization you need. 

The Hierarchical Grid is best for naturally nested data with clear parent-child relationships.  

Advantages: 

• Minimal setup and maintenance. 
• Built-in support for multiple hierarchy levels. 
• Optimized for performance with lazy (on-demand) loading. 
• Uniform UX for expanding/collapsing rows at any level. 

The Master-Detail Grid is more flexible if details come from separate sources or unrelated datasets. 

Advantages: 

• Highly customizable layouts and content templates. 
• Ideal when each detail level is unique or non-repetitive. 
• Supports integration with other components (charts, forms, maps, etc.). 
• Offers granular control over when and how data is loaded. 

Note: Position the hierarchical grid as a “plug-and-play” solution for hierarchical structures.  

Wrap Up… 

If your data is inherently nested, the Hierarchical Grid is the easiest and most efficient way to visualize it. 
However, even when your data comes from separate endpoints, you can still take advantage of its on-demand data loading capabilities to display related datasets dynamically — for example, loading child records like customers → customers/{id}/orders → orders/{id}/orderDetails only when a row is expanded. 

For non-related or fully custom layouts, check out our Master-Detail Grid guide to compare both approaches.