階層グリッドで詳細データをオンデマンドで表示する方法

手動の設定と構成が必要な従来のマスター/詳細グリッドとは異なり、Ignite UI for Angularの階層グリッドは、親子データ関係をすぐに自動的に処理します。シンプルさを考慮して設計されており、最小限のセットアップで拡張可能な行を通じてネストされたデータを探索できます。

最も優れた点の 1 つは、追加のコーディングを行わずに階層データを簡単に展開および折りたたむことができ、作業時間を節約できることです。詳細なデータをオンデマンドで表示するプロセス全体をガイドするために、このハウツー ブログ投稿で必要な手順の概要を説明しました。開発サイクルをさらに合理化するためのコード スニペットとデモもあります。

Let’s get started. 

階層グリッドを使用する理由

階層グリッドは、複数のレベルを自然に含むリレーショナルまたはネストされたデータ構造を操作するのに最適です。子レコードの表示方法を自動的に管理し、階層の各レベルに組み込みの展開/折りたたみ動作を提供します。これは、手動構成が減り、データに重点を置くことを意味します。

こんな方に最適:

• 親子関係(例:カテゴリ→製品→注文)
• Multi-level nested datasets 
• 現実世界の階層を反映するデータモデル

​マスター/詳細設定と比較して、階層グリッドは通常、特にデータがすでに自然な階層に従っている場合、必要な設定とロジックがはるかに少なくなります。
ただし、一意または無関係なデータセットの場合は、マスター/詳細レイアウトの方が適している場合があります。

階層グリッドが活躍するデータシナリオ

以下に、いくつかの実際の例を示します。

• Nested relational data — e.g. Customers → Orders → Order Details 
• 木のような構造 — 例: 会社→部門→従業員
• ドリルダウンレポート — 例: 地域→国、売上→

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

オンデマンド データ読み込みの探索

階層グリッドの最も便利な機能の 1 つは、オンデマンドのデータ読み込みです。詳細は、一度にすべて展開するのではなく、ユーザーが行を展開したときにのみ読み込まれます。その結果、次のものが得られます。

• 初期読み込み時間の短縮 (特に大規模なデータセットの場合)。
• Reduced memory usage. 
• よりスムーズなユーザーエクスペリエンス – ユーザーは必要なときにのみ必要なものを見ることができます。

非常に大きなデータセットの場合は、行と列の仮想化を有効にして、表示されているレコードのみがレンダリングされるようにすることもできます。この組み込みのメカニズムにより、グリッドは大規模なデータ アプリケーションに対して非常に効率的になります。

次に例を示します。数千のレコードを含む Customers テーブルがあり、各顧客が複数の Order を持つことができるとします。メイン グリッドは /customers エンドポイントにバインドされ、顧客のリストが返されます。ユーザーが特定の顧客行を展開すると、階層グリッドは /customers/{id}/orders エンドポイント ({id} は展開された顧客レコードの識別子) を呼び出して、関連する注文を動的に読み込みます。

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

最小限のセットアップで済みます

もう一つの素晴らしい点は、意図的に軽量にしたセットアップです。データがすでにネストされたレベルで整理されている場合は、すべてがすぐに機能します。リモートデータソースの場合、ユーザーが行を展開したときにオンデマンドで子レコードを読み込むことができ、すべてを事前に取得する必要はありません。

例

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

ネストされたデータは、展開する場合にのみ表示されます(下の画像を参照)。

階層グリッドとマスターディテールを使用する場合

階層グリッドとマスター/詳細グリッドのどちらを選択するかは、データ構造、パフォーマンス要件、および必要なカスタマイズの量によって異なります。

​階層グリッドは、親子関係が明確な自然に入れ子になったデータに最適です。

Advantages: 

• Minimal setup and maintenance. 
• 複数の階層レベルの組み込みサポート。
• 遅延 (オンデマンド) 読み込みのパフォーマンスに最適化されています。
• 任意のレベルで行を展開/折りたたむための均一な UX。

​マスター/詳細グリッドは、詳細が別々のソースまたは無関係なデータセットから取得される場合、より柔軟になります。

Advantages: 

• 高度にカスタマイズ可能なレイアウトとコンテンツテンプレート。
• 各詳細レベルが一意または反復的でない場合に最適です。
• 他のコンポーネント (チャート、フォーム、マップなど) との統合をサポートします。
• データの読み込みのタイミングと方法をきめ細かく制御できます。

注: 階層グリッドは、階層構造の「プラグアンドプレイ」ソリューションとして配置します。

まとめ...

データが本質的にネストされている場合は、階層グリッドがデータを視覚化する最も簡単で効率的な方法です。
ただし、データが別々のエンドポイントから取得されている場合でも、オンデマンドのデータ読み込み機能を利用して、関連するデータセットを動的に表示できます (たとえば、行が展開されたときにのみ、customers/{id}/orders → customers/{id}/orderDetails → customers/{id}/orderDetails などの子レコードを読み込むなど)。

関連性のないレイアウトや完全にカスタムのレイアウトについては、マスター/ディテールグリッドガイドを参照して、両方のアプローチを比較してください。