계층적 그리드에 주문형 세부 정보를 표시하는 방법

수동 설정 및 구성이 필요한 기존 마스터-세부 정보 그리드와 달리 Ignite UI for Angular의 계층적 그리드는 즉시 상위-자식 데이터 관계를 자동으로 처리합니다. 단순성을 위해 설계되어 최소한의 설정으로 확장 가능한 행을 통해 중첩된 데이터를 탐색할 수 있습니다.

가장 좋은 점 중 하나는 추가 코딩 없이 계층적 데이터를 쉽게 확장하고 축소할 수 있어 작업 시간을 절약할 수 있다는 것입니다. 필요에 따라 자세한 데이터를 표시하는 전체 프로세스를 안내하기 위해 이 방법 블로그 게시물에서 필요한 단계를 간략하게 설명했습니다. 개발 주기를 더욱 간소화하기 위한 코드 조각과 데모도 있습니다.

Let’s get started. 

계층적 그리드를 사용하는 이유는 무엇입니까?

계층적 그리드는 자연스럽게 여러 수준을 포함하는 관계형 또는 중첩된 데이터 구조로 작업하는 데 이상적입니다. 하위 레코드가 표시되는 방식을 자동으로 관리하여 각 계층 수준에 대한 기본 제공 확장/축소 동작을 제공합니다. 즉, 수동 구성이 줄어들고 데이터에 더 집중할 수 있습니다.

완벽한 대상:

• 상위-하위 관계(예: 카테고리 → 제품 → 주문)
• Multi-level nested datasets 
• 실제 계층 구조를 미러링하는 데이터 모델

​마스터-세부 정보 설정과 비교할 때 계층적 그리드는 일반적으로 훨씬 적은 설정과 로직이 필요하며, 특히 데이터가 이미 자연 계층을 따르는 경우 더욱 그렇습니다.
그러나 고유하거나 관련이 없는 데이터 세트의 경우 마스터-세부 정보 레이아웃이 여전히 더 적합할 수 있습니다.

Data Scenarios Where Hierarchical Grid Shines 

아래에서 몇 가지 실제 예를 살펴볼 수 있습니다.

• 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 } 
        ] 
      } 
    ] 
  } 
]

Exploring On-Demand Data Loading 

계층적 그리드의 가장 유용한 기능 중 하나는 주문형 데이터 로딩입니다. 세부 정보는 사용자가 한 번에 모두 확장하는 것이 아니라 행을 확장할 때만 로드됩니다. 결과적으로 다음을 얻을 수 있습니다.

• 초기 로드 시간이 빨라집니다(특히 대규모 데이터 세트의 경우).
• 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; 
    }); 
  } 

Minimal Setup Required  

또 다른 좋은 점은 의도적으로 가벼운 설정입니다. 데이터가 이미 중첩된 수준으로 구성되어 있으면 모든 것이 즉시 작동합니다. 원격 데이터 소스의 경우 사용자가 행을 확장할 때 온디맨드로 하위 레코드를 로드할 수 있으므로 모든 것을 미리 가져올 필요가 없습니다.

본보기:

<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 → customers/{id}/orders → orders/{id}/orderDetails와 같은 하위 레코드를 로드합니다).

관련되지 않거나 완전히 사용자 정의 레이아웃의 경우 마스터-세부 그리드 가이드를 확인하여 두 접근 방식을 비교하십시오.