{"id":3237,"date":"2025-10-23T06:45:44","date_gmt":"2025-10-23T06:45:44","guid":{"rendered":"https:\/\/www.infragistics.com\/blogs\/?p=3237"},"modified":"2025-10-23T06:55:49","modified_gmt":"2025-10-23T06:55:49","slug":"details-data-on-demand","status":"publish","type":"post","link":"https:\/\/www.infragistics.com\/blogs\/details-data-on-demand","title":{"rendered":"How to Display\u00a0Details\u00a0Data\u00a0On Demand in a Hierarchical Grid\u00a0"},"content":{"rendered":"\n<p>Unlike a traditional&nbsp;<a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/grid\/master-detail\" target=\"_blank\" rel=\"noreferrer noopener\">Master-Detail Grid<\/a>, which requires manual setup and configuration, the&nbsp;<a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\/angular\/components\/hierarchicalgrid\/hierarchical-grid\" target=\"_blank\" rel=\"noreferrer noopener\">Hierarchical Grid<\/a>&nbsp;from&nbsp;<a href=\"https:\/\/www.infragistics.com\/products\/ignite-ui-angular\" target=\"_blank\" rel=\"noreferrer noopener\">Ignite UI for Angular<\/a>&nbsp;automatically handles parent-child data relationships out of the box.&nbsp;It\u2019s&nbsp;designed for simplicity, allowing you to explore nested data through expandable rows with minimal setup.&nbsp;<\/p>\n\n\n\n<p>One of the best things is that you\u00a0can expand and collapse hierarchical data effortlessly\u00a0without\u00a0extra coding, saving you hours of work. To guide you through the entire process of displaying detailed data on demand, we\u2019ve outlined the necessary steps in this how-to blog post. There are also code snippets and demos to streamline the development cycle further.\u00a0<\/p>\n\n\n\n<p>Let\u2019s&nbsp;get started.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"why-use-a-hierarchical-grid\">Why Use a Hierarchical Grid?\u202f<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"538\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1-1024x538.jpg\" alt=\"ignite ui for angular hierarchical grid\" class=\"wp-image-3252\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1-1024x538.jpg 1024w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1-300x158.jpg 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1-768x403.jpg 768w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1-480x252.jpg 480w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/ignite-ui-hierarchical-grid-1200x630-1.jpg 1200w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>The Hierarchical Grid is ideal for working with relational or nested data structures that naturally&nbsp;contain&nbsp;multiple levels.&nbsp;It automatically manages how child records are displayed, providing built-in&nbsp;expand\/collapse behavior for each level of hierarchy. This means less manual configuration and more focus on your data.&nbsp;&nbsp;<\/p>\n\n\n\n<p>Perfect for:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Parent-child relationships (e.g., Categories \u2192 Products \u2192 Orders)&nbsp;<\/li>\n\n\n\n<li>Multi-level nested datasets&nbsp;<\/li>\n\n\n\n<li>Data models that mirror real-world hierarchies&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Compared to\u00a0a\u00a0<a href=\"https:\/\/www.infragistics.com\/blogs\/master-detail-layout\/\" target=\"_blank\" rel=\"noreferrer noopener\">Master-Detail setup<\/a>,\u00a0the Hierarchical Grid usually needs much less setup and logic\u2014especially when your data already follows a natural hierarchy.\u00a0<br>For unique or unrelated datasets, though, a Master-Detail layout may still be the better fit.\u00a0<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"data-scenarios-where-hierarchical-grid-shines\">Data Scenarios Where Hierarchical Grid Shines&nbsp;<\/h2>\n\n\n\n<p>Below&nbsp;you can have a look at several practical examples.&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Nested relational data \u2014&nbsp;e.g.&nbsp;Customers \u2192 Orders \u2192 Order Details&nbsp;<\/li>\n\n\n\n<li>Tree-like structures \u2014&nbsp;e.g.&nbsp;Company \u2192 Departments \u2192 Employees&nbsp;<\/li>\n\n\n\n<li>Drill-down reporting \u2014\u00a0e.g.\u00a0Regions \u2192 Countries \u2192 Sales\u00a0<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">[ \n  { \n    \"Category\": \"Beverages\", \n    \"Products\": [ \n      { \n        \"ProductName\": \"Chai\", \n        \"Orders\": [ \n          { \"OrderID\": 10248, \"Quantity\": 15 }, \n          { \"OrderID\": 10249, \"Quantity\": 10 } \n        ] \n      }, \n      { \n        \"ProductName\": \"Chang\", \n        \"Orders\": [ \n          { \"OrderID\": 10250, \"Quantity\": 20 } \n        ] \n      } \n    ] \n  } \n]<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"exploring-on-demand-data-loading\">Exploring&nbsp;On-Demand Data Loading&nbsp;<\/h2>\n\n\n\n<p>One of&nbsp;the&nbsp;Hierarchical&nbsp;Grid\u2019s most useful features is on-demand data loading.&nbsp;Details are loaded only when the user expands a row, instead of all at once.&nbsp;As a result, you get:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Faster&nbsp;initial&nbsp;load times (especially with large datasets).&nbsp;<\/li>\n\n\n\n<li>Reduced memory usage.&nbsp;<\/li>\n\n\n\n<li>Smoother user experience&nbsp;\u2013&nbsp;users only see what they&nbsp;want&nbsp;when they need it.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>For&nbsp;very large&nbsp;datasets, you can also enable&nbsp;row and column virtualization, which ensures only visible records are&nbsp;rendered. This built-in mechanism makes the grid highly efficient for large-scale data applications.&nbsp;<\/p>\n\n\n\n<p>Here&#8217;s an example. Imagine you have a\u00a0Customers\u00a0table with thousands of records, and each customer can have multiple\u00a0Orders. The main grid is bound to the\u00a0\/customers\u00a0endpoint, 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\u00a0\/customers\/{id}\/orders\u00a0endpoint, where\u00a0{id}\u00a0is the identifier of the expanded customer record.\u00a0<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\n&lt;igx-hierarchical-grid \n  [data]=\"northwindSwaggerCategoryDto\" \n  primaryKey=\"categoryId\" \n  [allowFiltering]=\"true\" \n  filterMode=\"excelStyleFilter\" \n  class=\"hierarchical-grid\"> \n  &lt;!-- Category columns --> \n  &lt;igx-column field=\"categoryId\" dataType=\"number\" header=\"categoryId\" [filterable]=\"true\" [sortable]=\"true\">&lt;\/igx-column> \n  &lt;igx-column field=\"name\" dataType=\"string\" header=\"name\" [filterable]=\"true\" [sortable]=\"true\">&lt;\/igx-column> \n  &lt;igx-column field=\"description\" dataType=\"string\" header=\"description\" [filterable]=\"true\" [sortable]=\"true\">&lt;\/igx-column> \n  &lt;!-- Products Row Island --> \n  &lt;igx-row-island primaryKey=\"productId\" (gridCreated)=\"gridCreatedProductDto($event)\"> \n    &lt;igx-column field=\"productId\" dataType=\"number\" header=\"productId\">&lt;\/igx-column> \n    &lt;igx-column field=\"productName\" dataType=\"string\" header=\"productName\">&lt;\/igx-column> \n    &lt;igx-column field=\"supplierId\" dataType=\"number\" header=\"supplierId\">&lt;\/igx-column> \n    &lt;igx-column field=\"categoryId\" dataType=\"number\" header=\"categoryId\">&lt;\/igx-column> \n    &lt;igx-column field=\"quantityPerUnit\" dataType=\"string\" header=\"quantityPerUnit\">&lt;\/igx-column> \n  &lt;\/igx-row-island> \n&lt;\/igx-hierarchical-grid> <\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Load child grid data (products) dynamically when a category is expanded \n  public onProductsGridCreated(event: IGridCreatedEventArgs): void { \n    event.grid.isLoading = true; \n    const categoryId = event.parentRowData?.categoryId; \n    this.http.get&lt;any[]>(`\/api\/categories\/${categoryId}\/products`).subscribe(data => { \n      event.grid.data = data; \n      event.grid.isLoading = false; \n    }); \n  } <\/pre>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"minimal-setup-required\">Minimal Setup Required\u202f&nbsp;<\/h2>\n\n\n\n<p>Another&nbsp;great thing&nbsp;is the setup&nbsp;which is&nbsp;intentionally lightweight.&nbsp;If your data is already organized in nested levels, everything works right away.&nbsp;For remote data sources, you can load child records on-demand when users expand a row \u2014 no need to fetch everything upfront.&nbsp;<\/p>\n\n\n\n<p>Example:&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;igx-hierarchical-grid [data]=\"categories\" primaryKey=\"Category\" class=\"hierarchical-grid\"> \n  &lt;igx-row-island key=\"Products\" primaryKey=\"ProductName\"> \n    &lt;igx-row-island key=\"Orders\" primaryKey=\"OrderID\"> \n      &lt;igx-column field=\"OrderID\" header=\"Order ID\">&lt;\/igx-column> \n      &lt;igx-column field=\"Quantity\" header=\"Quantity\">&lt;\/igx-column> \n    &lt;\/igx-row-island> \n    &lt;igx-column field=\"ProductName\" header=\"Product\">&lt;\/igx-column> \n  &lt;\/igx-row-island> \n  &lt;igx-column field=\"Category\" header=\"Category\">&lt;\/igx-column> \n&lt;\/igx-hierarchical-grid> <\/pre>\n\n\n\n<p><br>Nested data is revealed only when expanding\u00a0(as depicted in the image below).\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"628\" height=\"248\" src=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/image-7.png\" alt=\"\" class=\"wp-image-3239\" srcset=\"https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/image-7.png 628w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/image-7-300x118.png 300w, https:\/\/www.infragistics.com\/blogs\/wp-content\/uploads\/2025\/10\/image-7-480x190.png 480w\" sizes=\"auto, (max-width: 628px) 100vw, 628px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"when-to-use-hierarchical-grid-vs-master-detail\">When to Use Hierarchical Grid vs Master-Detail?&nbsp;<\/h2>\n\n\n\n<p>Choosing between a Hierarchical Grid and a Master-Detail Grid depends on your data&nbsp;structure, performance requirements, and how much customization you need.&nbsp;<\/p>\n\n\n\n<p>The <strong>Hierarchical Grid<\/strong> is best for naturally nested data with clear parent-child relationships.\u202f\u00a0<\/p>\n\n\n\n<p>Advantages:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Minimal setup and maintenance.&nbsp;<\/li>\n\n\n\n<li>Built-in support for multiple hierarchy levels.&nbsp;<\/li>\n\n\n\n<li>Optimized&nbsp;for performance with lazy (on-demand) loading.&nbsp;<\/li>\n\n\n\n<li>Uniform UX for expanding\/collapsing rows at any level.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>The <strong>Master-Detail Grid<\/strong> is more flexible if details come from separate sources or unrelated datasets.\u00a0<\/p>\n\n\n\n<p>Advantages:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Highly customizable layouts and content templates.&nbsp;<\/li>\n\n\n\n<li>Ideal when each detail level is unique or non-repetitive.&nbsp;<\/li>\n\n\n\n<li>Supports integration with other components (charts, forms, maps, etc.).&nbsp;<\/li>\n\n\n\n<li>Offers granular control over when and how data is loaded.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Note: Position the hierarchical grid as a \u201cplug-and-play\u201d solution for hierarchical structures.\u202f&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"wrap-up\">Wrap Up\u2026&nbsp;<\/h2>\n\n\n\n<p>If your data is inherently nested, the Hierarchical Grid is the easiest and most efficient way to visualize it.&nbsp;<br>However, even when your data comes from separate endpoints, you can still take advantage of its&nbsp;on-demand data loading&nbsp;capabilities to display related datasets dynamically \u2014 for example, loading child records like&nbsp;customers \u2192 customers\/{id}\/orders \u2192 orders\/{id}\/orderDetails&nbsp;only when a row is expanded.&nbsp;<\/p>\n\n\n\n<p>For non-related or fully custom layouts, check out our\u00a0Master-Detail Grid\u00a0guide to compare both approaches.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>How can you easily display details data on-demand? In this blog post we demonstrate the exact steps, using Ignite UI for Angular Hierarchical Grid. Read more and explore code snippets and examples.<\/p>\n","protected":false},"author":21,"featured_media":3242,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17],"tags":[23,36,65,20,38],"class_list":["post-3237","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-how-to","tag-angular","tag-app-development","tag-hierarchical-grid","tag-ignite-ui","tag-ignite-ui-angular"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3237","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=3237"}],"version-history":[{"count":12,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3237\/revisions"}],"predecessor-version":[{"id":3254,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/3237\/revisions\/3254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/3242"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=3237"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=3237"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=3237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}