Hierarchical Grid Summaries Overview

The Angular UI grid in Ignite UI for Angular has a summaries feature that functions on a per-column level as group footer. Angular grid summaries is powerful feature which enables the user to see column information in a separate container with a predefined set of default summary items, depending on the type of data within the column or by implementing a custom angular template in the Hierarchical Grid.

데모

Note

열 요약은 모든 열 값의 함수이지만 필터링이 적용된 경우에는 열 요약은 필터링된 결과 값의 함수가 됩니다

Ignite UI for Angular에서 Hierarchical Grid summaries을 열 단위 수준으로 활성화하고 필요한 열에 대해서만 활성화할 수 있습니다. Hierarchical Grid 요약은 열의 데이터 유형에 따라 사전 정의된 기본 요약 세트를 제공하므로 시간을 절약할 수 있습니다.

string 및 boolean data types의 경우 다음의 함수를 사용할 수 있습니다:

• count

number 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:

• count
• min
• max
• average
• sum

date 데이터 유형의 경우 다음의 함수를 사용할 수 있습니다:

• count
• earliest
• latest

hasSummary 속성을 true로 설정하면 Hierarchical Grid 요약이 열 단위로 활성화됩니다. 또한, 각 열의 요약은 열 데이터 형식에 따라 해결되는 것에 유의하십시오. igx-hierarchical-grid에서 기본 열 데이터 유형은 string이므로 number 또는 date 별 요약을 원하는 경우, dataType 속성을 number 또는 date로 설정해야 합니다.

<igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
        <igx-column field="Artist" [hasSummary]='true'></igx-column>
        <igx-column field="Photo">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <img [src]="cell.value" class="photo" />
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="Debut" [hasSummary]='true'></igx-column>
        <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
        <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
        ...
    </igx-hierarchical-grid>

특정 열 또는 열 목록에서 요약을 활성화/비활성화하는 또 다른 방법은 igx-hierarchical-grid의 공개 메소드 enableSummaries/disableSummaries를 사용하는 것입니다.

<igx-hierarchical-grid #hierarchicalGrid [data]="data" [autoGenerate]="false" height="800px" width="800px" (columnInit)="initColumn($event)" >
  <igx-column field="Artist" [hasSummary]='true'></igx-column>
        <igx-column field="Photo">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <img [src]="cell.value" class="photo" />
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="Debut" [hasSummary]='true'></igx-column>
        <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
        <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
</igx-hierarchical-grid>
<button (click)="enableSummary()">Enable Summary</button>
<button (click)="disableSummary()">Disable Summary </button>

public enableSummary() {
    this.hierarchicalGrid.enableSummaries([
        {fieldName: "Grammy Nominations", customSummary: this.mySummary},
        {fieldName: "Artist"}
    ]);
}
public disableSummary() {
    this.hierarchicalGrid.disableSummaries("Photo");
}

이러한 함수가 요구 사항을 충족시키지 못하면 특정 열에 대한 사용자 요약을 제공할 수 있습니다. 이를 실행하려면 열 데이터 유형 및 필요에 따라 기본 클래스인 IgxSummaryOperand, IgxNumberSummaryOperand 또는 IgxDateSummaryOperand 중에서 하나를 무효화해야 합니다. 이 방법으로 기존 함수를 다시 정의하거나 새로운 함수를 추가할 수 있습니다. IgxSummaryOperand 클래스는 count 메소드에 대해서만 기본 실행을 제공합니다. IgxNumberSummaryOperand는 IgxSummaryOperand를 확장하고 min, max, sum 및 average의 구현을 제공합니다. IgxDateSummaryOperand는 IgxSummaryOperand를 확장하며 earliest 및 latest를 제공합니다.

import { IgxRowIslandComponent, IgxHierarchicalGridComponent, IgxNumberSummaryOperand, IgxSummaryResult } from "igniteui-angular";

class MySummary extends IgxNumberSummaryOperand {

    constructor() {
      super();
    }
    public operate(data?: any[]): IgxSummaryResult[] {
      const result = super.operate(data);
      result.push({
        key: "test",
        label: "More than 5",
        summaryResult: data.filter((rec) => rec > 5).length
      });

      return result;
    }
  }

위의 코드에서 메소드 operate는 인터페이스인 IgxSummaryResult의 목록을 반환하는 것을 볼 수 있습니다.

interface IgxSummaryResult {
    key: string;
    label: string;
    summaryResult: any;
}

Note

요약 행 높이를 올바르게 계산하기 위해 Hierarchical Grid의 operate 메소드에서 데이터가 비어있는 경우에도 항상 적절한 길이의 IgxSummaryResult 배열을 반환해야 합니다.

이제 GramyNominations 열에 사용자 요약을 추가해 보겠습니다. summaries 속성을 아래에서 작성하는 클래스로 설정하면 됩니다.

 <igx-hierarchical-grid class="hgrid" [data]="localdata" [autoGenerate]="false"
        [height]="'600px'" [width]="'100%'" #hierarchicalGrid>
        <igx-column field="Artist" [hasSummary]='true'></igx-column>
        <igx-column field="Photo">
            <ng-template igxCell let-cell="cell">
                <div class="cell__inner_2">
                    <img [src]="cell.value" class="photo" />
                </div>
            </ng-template>
        </igx-column>
        <igx-column field="Debut" [hasSummary]='true'></igx-column>
        <igx-column field="Grammy Nominations" [hasSummary]='true' [dataType]="'number'" [summaries]="mySummary"></igx-column>
        <igx-column field="Grammy Awards" [hasSummary]='true' [dataType]="'number'"></igx-column>
...
</igx-hierarchical-grid>

...
export class HGridSummarySampleComponent implements OnInit {
    mySummary = MySummary;
    ....
}

Custom summaries, which access all Hierarchical Grid data

Now you can access all grid data inside the custom column summary. Two additional optional parameters are introduced in the IgxSummaryOperand operate method. As you can see in the code snippet below the operate method has the following three parameters:

• columnData - gives you an array that contains the values only for the current column
• allGridData - gives you the whole grid data source
• fieldName - current column field

class MySummary extends IgxNumberSummaryOperand {
    constructor() {
        super();
    }
    operate(columnData: any[], allGridData = [], fieldName?): IgxSummaryResult[] {
        const result = super.operate(allData.map(r => r[fieldName]));
        result.push({ key: 'test', label: 'Total Discontinued', summaryResult: allData.filter((rec) => rec.Discontinued).length });
        return result;
    }
}

키보드 탐색

요약 행은 다음과 같은 키보드 조작으로 탐색할 수 있습니다:

• UP - 한 셀 위로 이동
• DOWN - 한 셀 아래로 이동
• LEFT - 한 셀 왼쪽으로 이동
• RIGHT - 한 셀 오른쪽으로 이동
• CTRL + LEFT 또는 HOME - 가장 왼쪽 셀로 이동
• CTRL + RIGHT 또는 END - 가장 오른쪽 셀로 이동
• TAB - 행의 다음 셀로 순차적으로 이동하고 마지막 셀에 도달하면 다음 행으로 이동
• SHIFT + TAB - 행의 이전 셀로 순차적으로 이동하고 첫 번째 셀에 도달하면 이전 행으로 이동

API 참조

• IgxHierarchicalGridComponent API
• IgxHierarchicalGridComponent 스타일
• IgxHierarchicalGridSummaries 스타일
• IgxSummaryOperand
• IgxNumberSummaryOperand
• IgxDateSummaryOperand
• IgxColumnGroupComponent
• IgxColumnComponent

추가 리소스

• Hierarchical Grid 개요
• 가상화 및 성능
• 페이징
• 필터링
• 정렬
• 열 이동
• 열 핀 고정
• 열 크기 조정
• 선택

커뮤니티는 활동적이고 새로운 아이디어를 항상 환영합니다.

• Ignite UI for Angular 포럼
• Ignite UI for Angular GitHub