Premium

Angular 階層グリッドコンポーネントの概要

Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの表示と操作に使用されます。最小限のコードでデータをすばやくバインドするか、さまざまなイベントを使用してさまざまな動作をカスタマイズします。このコンポーネントは、データ選択、Excel スタイルのフィルタリング、ソート、ページング、テンプレート化、列の移動、列のピン固定、Excel、CSV、PDF へのエクスポートなどの豊富な機能セットを提供します。Hierarchical Grid は、Flat Grid コンポーネントをベースとして構築されており、親グリッドの行の展開/縮小、詳細な情報が必要な場合に対応する子グリッドを表示する機能を拡張しました。

Angular 階層グリッドの例

この Angular グリッドの例では、ユーザーがデータの階層セットを視覚化し、セルテンプレートを使用してスパークラインなどの他の視覚的コンポーネントを追加する方法を確認できます。

Ignite UI for Angular Hierarchical Data Grid を使用した作業の開始

このコンポーネントはマテリアルアイコンを使用します。index.html に次のリンクを追加してください: <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ignite UI for Angular Hierarchical Data Grid コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

ng add igniteui-angular

Ignite UI for Angular については、「はじめに」ピックをご覧ください。

次に、app.module.ts ファイルに IgxHierarchicalGridModule をインポートします。

// app.module.ts

import { IgxHierarchicalGridModule } from 'igniteui-angular/grids/hierarchical-grid';
// import { IgxHierarchicalGridModule } from '@infragistics/igniteui-angular'; for licensed package

@NgModule({
    imports: [
        ...
        IgxHierarchicalGridModule,
        ...
    ]
})
export class AppModule {}

あるいは、16.0.0 以降、IgxHierarchicalGridComponent をスタンドアロンの依存関係としてインポートすることも、IGX_HIERARCHICAL_GRID_DIRECTIVES トークンを使用してコンポーネントとそのすべてのサポートコンポーネントおよびディレクティブをインポートすることもできます。

// home.component.ts

import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from 'igniteui-angular/grids/hierarchical-grid';
// import { IGX_HIERARCHICAL_GRID_DIRECTIVES } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
    <igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
        <igx-row-island [key]="'Albums'" [autoGenerate]="true">
            <igx-row-island [key]="'Songs'" [autoGenerate]="true">
            </igx-row-island>
        </igx-row-island>
        <igx-row-island [key]="'Tours'" [autoGenerate]="true">
        </igx-row-island>
    </igx-hierarchical-grid>
    `,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES]
    /* or imports: [IgxHierarchicalGridComponent, IgxRowIslandComponent] */
})
export class HomeComponent {
    public singers: Artist [];
}

Ignite UI for Angular Hierarchical Grid モジュールまたはディレクティブをインポートしたので、igx-hierarchical-grid コンポーネントの使用を開始できます。

Angular Hierarchical Data Grid の使用

データバインディング

igx-hierarchical-grid は、igx-grid から派生し、ほとんどの機能を共有します。主要な違いは階層で複数レベルを定義できることです。igx-row-island と呼ばれる igx-hierarchical-grid の定義内の個別のタグで設定されます。igx-row-island コンポーネントは、特定レベルの各子グリッドの設定を定義します。レベルごとの複数行アイランドがサポートされます。階層グリッドで 2 通りのデータバインドがサポートされます。

階層データの使用

アプリケーションが階層データ全体をオブジェクトの子配列を参照するオブジェクトの配列として読み込む場合、Hierarchical Grid を設定して読み込み、自動的にバインドすることができます。以下はプロパティ構造の階層データソースのプロパティの例です。

export const singers = [{
    "Artist": "Naomí Yepes",
    "Photo": "assets/images/hgrid/naomi.png",
    "Debut": "2011",
    "Grammy Nominations": 6,
    "Grammy Awards": 0,
    "Tours": [{
        "Tour": "Faithful Tour",
        "Started on": "Sep-12",
        "Location": "Worldwide",
        "Headliner": "NO",
        "Toured by": "Naomí Yepes"
    }],
    "Albums": [{
        "Album": "Dream Driven",
        "Launch Date": new Date("August 25, 2014"),
        "Billboard Review": "81",
        "US Billboard 200": "1",
        "Artist": "Naomí Yepes",
        "Songs": [{
            "No.": "1",
            "Title": "Intro",
            "Released": "*",
            "Genre": "*",
            "Album": "Dream Driven"
        }]
    }]
}];

各 igx-row-island は、子データを保持するプロパティのキーを指定します。

<igx-hierarchical-grid #hierarchicalGrid [data]="singers" [autoGenerate]="true">
    <igx-row-island [key]="'Albums'" [autoGenerate]="true">
        <igx-row-island [key]="'Songs'" [autoGenerate]="true">
        </igx-row-island>
    </igx-row-island>
    <igx-row-island [key]="'Tours'" [autoGenerate]="true">
    </igx-row-island>
</igx-hierarchical-grid>

data の代わりにユーザーは、データを自動的に設定するめの読み込みに igx-hierarchical-grid が必要な key のみ設定します。

ロードオンデマンドの使用

ほとんどのアプリケーションがはじめに最小限のデータを読み込むようでざいんされているため、結果的に読み込み時間が短くなります。このような場合、igx-hierarchical-grid を設定してユーザーが作成したサービスでデータのオンデマンドフィードを可能にします。以下の設定は、特別な @Output と新しい loading-in-progress テンプレートでロードオンデマンドのすべての機能が提供されます。

<!-- hierarchicalGridSample.component.html -->

<igx-hierarchical-grid #hGrid [primaryKey]="'CustomerID'" [autoGenerate]="true" [height]="'600px'" [width]="'100%'">
    <igx-row-island [key]="'Orders'" [primaryKey]="'OrderID'" [autoGenerate]="true"  (gridCreated)="gridCreated($event, 'CustomerID')">
        <igx-row-island [key]="'Order_Details'" [primaryKey]="'ProductID'" [autoGenerate]="true" (gridCreated)="gridCreated($event, 'OrderID')">
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>

//  hierarchicalGridSample.component.ts

@Component({...})
export class HierarchicalGridLoDSampleComponent implements AfterViewInit {
    @ViewChild("hGrid")
    public hGrid: IgxHierarchicalGridComponent;

    constructor(private remoteService: RemoteLoDService) { }

    public ngAfterViewInit() {
        this.hGrid.isLoading = true;
        this.remoteService.getData({ parentID: null, rootLevel: true, key: "Customers" }).subscribe((data) => {
            this.hGrid.isLoading = false;
            this.hGrid.data = data;
            this.hGrid.cdr.detectChanges();
        });
    }

    public gridCreated(event: IGridCreatedEventArgs, _parentKey: string) {
        const dataState = {
            key: event.owner.key,
            parentID: event.parentID,
            parentKey: _parentKey,
            rootLevel: false
        };
        event.grid.isLoading = true;
        this.remoteService.getData(dataState).subscribe(
            (data) => {
                event.grid.isLoading = false;
                event.grid.data = data;
                event.grid.cdr.detectChanges();
            }
        );
    }
}

// remote-load-on-demand.service.ts

@Injectable()
export class RemoteLoDService {
    public url = `https://services.odata.org/V4/Northwind/Northwind.svc/`;

    constructor(private http: HttpClient) { }

    public getData(dataState?: any): Observable<any[]> {
        return this.http.get(this.buildUrl(dataState)).pipe(
            map((response) => response["value"])
        );
    }

    public buildUrl(dataState) {
        let qS = "";
        if (dataState) {
            qS += `${dataState.key}?`;

            if (!dataState.rootLevel) {
                if (typeof dataState.parentID === "string") {
                    qS += `$filter=${dataState.parentKey} eq '${dataState.parentID}'`;
                } else {
                    qS += `$filter=${dataState.parentKey} eq ${dataState.parentID}`;
                }
            }
        }
        return `${this.url}${qS}`;
    }
}

行展開インジケーターの非表示/表示

行がその展開前に子を持っているかの確認は、TreeGrid.hasChildrenKey 入力プロパティで判断できます。このようにして、展開インジケータを表示するかどうかを示すデータオブジェクトからブール値プロパティを提供できます。

<igx-hierarchical-grid #grid [data]="data" primaryKey="ID" hasChildrenKey="hasChildren">
        ...
</igx-hierarchical-grid>

HierarchicalGrid.hasChildrenKey プロパティを設定する必要がないことに注意してください。指定しなかった場合は、各行に展開インジケーターが表示されます。

さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、HierarchicalGrid.showExpandAll プロパティを使用できます。この UI は、パフォーマンス上の理由からデフォルトで無効になっているため、データが大きいグリッドやロードオンデマンドのグリッドで有効にすることはお勧めしません。

機能

グリッド機能を有効にして igx-row-island マークアップを介して設定し、作成された各グリッドに適用されます。ランタイムに行アイランドインスタンスでオプションを変更すると生成した各グリッドで変更されます。

<igx-hierarchical-grid [data]="localData" [autoGenerate]="false"
    [allowFiltering]='true' [height]="'600px'" [width]="'800px'" #hGrid>
    <igx-column field="ID" [pinned]="true" [filterable]='true'></igx-column>
    <igx-column-group header="Information">
        <igx-column field="ChildLevels"></igx-column>
        <igx-column field="ProductName" hasSummary='true'></igx-column>
    </igx-column-group>
    <igx-row-island [key]="'childData'" [autoGenerate]="false" [rowSelection]="'multiple'" #layout1>
        <igx-column field="ID" [hasSummary]='true' [dataType]="'number'"></igx-column>
        <igx-column-group header="Information2">
            <igx-column field="ChildLevels"></igx-column>
            <igx-column field="ProductName"></igx-column>
        </igx-column-group>
        <igx-paginator *igxPaginator [perPage]="5"></igx-paginator>
    </igx-row-island>
    <igx-paginator>
    </igx-paginator>
</igx-hierarchical-grid>

以下のグリッド機能はグリッドレベルごとに動作するため、各グリッドインスタンスが残りのグリッドとは別に管理します。

ソート
フィルタリング
ページング
複数列ヘッダー
非表示
ピン固定
移動
集計
検索

選択とナビゲーション機能は、igx-hierarchical-grid 全体でグローバルに作用します。

選択選択は、選択したセルを異なる 2 つの子グリッドで同時に表示することを許可しません。
ナビゲーション up/down へ移動するときに next/prev 要素が子グリッドの場合、ナビゲーションが関連子グリッド内で継続され、関連セルが選択済みにマークされ、フォーカスされます。子セルが現在の表示ビューポート以外にある場合にビューへスクロールされるため、選択したセルが常に表示されます。

[すべて縮小] ボタン

左上の角にある [すべて縮小] ボタンを押して Hierarchical Grid で展開されてる行を縮小できます。更に他のグリッドを含む各子グリッドと Hierarchical Grid にも同様のボタンがあり、階層の特定のグリッドのみ縮小することができます。

サイズ変更

詳細については、Grid サイズ変更トピックをご覧ください。

CRUD 操作

フラットな Data Grid と行アイランドの各インスタンスの重要な違いは、同じトランザクションサービスインスタンスがあり、同じトランザクションログを蓄積する点です。CRUD 機能を有効にするには、IgxHierarchicalTransactionServiceFactory を注入する必要があります。

CRUD API メソッドの呼び出しは,各グリッドインスタンスで可能です。

igxGrid を使用して CRUD 操作を構築する方法のトピックをご覧ください。

スタイル設定

igxHierarchicalGrid を使用すると、Ignite UI for Angular テーマライブラリ でスタイルを設定できます。grid-theme は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。

以下の手順では、igxHierarchicalGrid スタイルをカスタマイズする手順を実行しています。

グローバルテーマのインポート

階層グリッドのカスタマイズは、すべてのスタイリング機能とミックスインが配置されている index ファイルをインポートする必要があります。

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

カスタムテーマの定義

次に、カスタムテーマを作成する必要があります。igx-hierarchical-grid をスタイル設定するための最も簡単で推奨される方法は、grid-theme を使用して、background、foreground、accent-color の 3 つのメインカラーを指定することです。

階層グリッド専用の sass 関数はありません。

これらはテーマの中核となるプロパティです。設定すると、すべてのグリッドパーツと内部コンポーネントがそれらの値からカラーを取得し、グリッド全体で一貫した外観になります。ボタン、アイコン、入力、ドロップダウン、チェックボックス、スクロールバー、チップ、その他のヘルパーコンポーネントなどのネストされたコンポーネントも、統一された外観のためにメインの grid-theme からスタイルトークンを取得します。

$background: #292826;
$foreground: #eeece1;
$accent: #ffcd0f;

$custom-grid: grid-theme(
  $background: $background,
  $foreground: $foreground,
  $accent-color: $accent,
);

上記のようにカラーの値をハードコーディングする代わりに、palette および color 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細についてはパレットのトピックをご覧ください。

カスタムテーマの適用

テーマを適用する最も簡単な方法は、グローバルスタイルファイルに sass @include ステートメントを使用することです。

:host {
  @include tokens($custom-grid);
}

In order for the custom theme do affect only specific component, you can move all of the styles you just defined from the global styles file to the custom component’s style file (including the import of the index file). This way, due to Angular’s ViewEncapsulation, your styles will be applied only to your custom component.

スコープコンポーネントテーマ

カスタムテーマが特定のコンポーネントのみに影響するように、定義したすべてのスタイルをグローバルスタイルファイルからカスタムコンポーネントのスタイルファイルに移動できます (index ファイルのインポートを含む)。このように、Angular の ViewEncapsulation により、スタイルはカスタムコンポーネントにのみ適用されます。

デモ

より詳細なカスタマイズが必要な場合は、grid-theme に追加のパラメーターがあります。

このサンプルは、Change Theme (テーマの変更) から選択したグローバルテーマに影響を受けません。

platformBrowserDynamic()
  .bootstrapModule(AppModule, { ngZoneEventCoalescing: true, ngZoneRunCoalescing: true })
  .catch(err => console.error(err));

This is still in experimental feature for the igxHierarchicalGrid. This means that there might be some unexpected behaviors in the Hierarchical Grid. In case of encountering any such behavior, please contact us on our Github page.

Enabling it can affects other parts of an Angular application that the igxHierarchicalGrid is not related to.

パフォーマンス (試験中)

igxHierarchicalGrid のデザインでは、Angular で導入されたイベント結合機能を利用できます。この機能は、インタラクションとレスポンシブの点で 20% のパフォーマンスを向上します。この機能は、bootstrapModule メソッドで ngZoneEventCoalescing と ngZoneRunCoalescing プロパティを true に設定するだけでアプリケーションレベルで有効にできます。

これは igxHierarchicalGrid の試験中の機能です。これは、階層グリッドで予期しない動作が発生する可能性があることを意味します。このような動作が発生した場合は、Github ページでお問い合わせください。

既知の問題と制限

制限	説明
グループ化	グループ化機能は、階層グリッドでサポートされません。

API リファレンス

テーマの依存関係

Our community is active and always welcoming to new ideas.

Angular 階層グリッド コンポーネントの概要