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

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

Angular 階層グリッドの例

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

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

Note

このコンポーネントは、オプションで HammerModule を利用できます。タッチ操作が正しく動作するために、アプリケーションのルートモジュールにインポートできます。

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';
// 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';
// 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>

Note

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

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

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

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

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

さらに、ヘッダーのすべて展開/縮小インジケーターを表示/非表示にする場合は、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 操作

Note

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

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

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

スタイル設定

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

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

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

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

@import '~igniteui-angular/lib/core/styles/themes/index'

カスタムテーマの定義

次に、grid-theme を拡張し、必要に応じて階層グリッドをカスタマイズするために必要なパラメーターを受け取る新しいテーマを作成します。

Note

特定の sass 階層グリッド機能はありません。

$custom-theme: grid-theme(
  $cell-active-border-color: #ffcd0f,
  $cell-selected-background: #6f6f6f,
  $row-hover-background: #f8e495,
  $row-selected-background: #8d8d8d,
  $header-background: #494949,
  $header-text-color: #fff,
  $expand-icon-color: #ffcd0f,
  $expand-icon-hover-color: #e0b710,
  $resize-line-color: #ffcd0f,
  $row-highlight: #ffcd0f
);

カスタムカラーパレットの定義

上記で説明したアプローチでは、色の値がハードコーディングされていました。または、igx-palette および igx-color 関数を使用して、柔軟性を高めることができます。
Igx-palette は指定した一次色と二次色に基づいてカラーパレットを生成します。

$black-color: #494949;
$yellow-color: #FFCD0F;

$custom-palette: palette(
 $primary: $black-color,
 $secondary: $yellow-color
);

カスタムパレットが生成された後、igx-color 関数を使用して、さまざまな種類の原色と二次色を取得できます。

$custom-theme: grid-theme(
    $cell-active-border-color: (igx-color($custom-palette, "secondary", 500)),
    $cell-selected-background: (igx-color($custom-palette, "primary", 300)),
    $row-hover-background: (igx-color($custom-palette, "secondary", 100)),
    $row-selected-background: (igx-color($custom-palette, "primary", 100)),
    $header-background: (igx-color($custom-palette, "primary", 500)),
    $header-text-color: (igx-contrast-color($custom-palette, "primary", 500)),
    $expand-icon-color: (igx-color($custom-palette, "secondary", 500)),
    $expand-icon-hover-color: (igx-color($custom-palette, "secondary", 600)),
    $resize-line-color: (igx-color($custom-palette, "secondary", 500)),
    $row-highlight: (igx-color($custom-palette, "secondary", 500))
);

カスタムスキーマの定義

さらに進んで、スキーマ のすべての利点を備えた柔軟な構造を構築できます。スキーマはテーマを作成させるための方法です。
すべてのコンポーネントに提供される 2 つの事前定義されたスキーマの 1 つを拡張します。この場合、$_light_grid を使用します。

$custom-grid-schema: extend($_light-grid,(
    cell-active-border-color: (igx-color:('secondary', 500)),
    cell-selected-background: (igx-color:('primary', 300)),
    row-hover-background: (igx-color:('secondary', 100)),
    row-selected-background: (igx-color:('primary', 100)),
    header-background: (igx-color:('primary', 500)),
    header-text-color: (igx-contrast-color:('primary', 500)),
    expand-icon-color: (igx-color:('secondary', 500)),
    expand-icon-hover-color: (igx-color:('secondary', 600)),
    resize-line-color: (igx-color:('secondary', 500)),
    row-highlight: (igx-color:('secondary', 500))
));

カスタムスキーマを適用するには、light グローバルまたは dark グローバルを拡張する必要があります。プロセス全体が実際にコンポーネントにカスタムスキーマを提供し、その後、それぞれのコンポーネントテーマに追加します。

$my-custom-schema: extend($light-schema, (
    igx-grid: $custom-grid-schema
));

$custom-theme: grid-theme(
    $palette: $custom-palette,
    $schema: $my-custom-schema
);

カスタムテーマの適用

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

@include grid($custom-theme);

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

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

このように、Angular の ViewEncapsulation により、スタイルはカスタムコンポーネントにのみ適用されます。

Note

コンポーネントが Emulated ViewEncapsulation を使用している場合、グリッドのスタイル設定は ::ng-deep を使用してこのカプセル化を解除する必要があります。

Note

ステートメントがコンポーネントの外にある要素に影響を与えないよう、ステートメントを :host セレクター内にラップします。

:host {
    ::ng-deep {
        @include grid($custom-theme);
    }
}

デモ

Note

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

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

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

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

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

Note

有効にすると、igxHierarchicalGrid に関連しない Angular アプリケーションの他の部分に影響します。

既知の問題と制限

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

Note

igxHierarchicalGrid は内部で igxForOf ディレクティブを使用するため、すべての igxForOf の制限が igxForOf で有効です。詳細については、igxForOf 既知の問題のセクションを参照してください。

API リファレンス

テーマの依存関係

その他のリソース

コミュニティに参加して新しいアイデアをご提案ください。

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

Angular 階層グリッドの例

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

Note

Angular Hierarchical Data Grid の使用

データ バインディング

階層データの使用

Note

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

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

機能

[すべて縮小] ボタン

サイズ変更

CRUD 操作

Note

スタイル設定

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

カスタム テーマの定義

Note

カスタム カラー パレットの定義

カスタム スキーマの定義

カスタム テーマの適用

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

Note

Note

デモ

Note

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

Note

既知の問題と制限

Note

API リファレンス

テーマの依存関係

その他のリソース

テーマ設定

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

データバインディング

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

カスタムテーマの定義

カスタムカラーパレットの定義

カスタムスキーマの定義

カスタムテーマの適用

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