Premium

階層グリッドロードオンデマンド

HierarchicalGrid は、要求するサーバーからのデータを最低限にすることによりすばやく描画できます。このため、ユーザーがビューで結果を確認でき、表示データをインタラクティブに操作できます。初期時にグリッドのデータのみが取得されて描画され、ユーザーが子グリッドを含む行を拡張した後のみ、特定の子グリッドのデータを取得します。このメカニズムはロードオンデマンドであらゆるリモートデータとの設定が簡単にできます。

このトピックでは、データを Northwind WebAPI に要求してロードオンデマンドを構成する方法を説明します。以下は、デモと作成手順を示します。

Angular 階層グリッドロードオンデマンドの例

階層グリッドのセットアップ

階層グリッドのセットアップを行いましょう。最初に階層グリッドテンプレートを必要な階層レベルで定義します。ルートグリッド (顧客データ) の primaryKey は customerId、第 1 階層の注文データでは orderId、さらにその詳細には productId をそれぞれ主キーとして使用します。各データベーステーブルとキーで初期テンプレートを定義します。

<igx-hierarchical-grid #hGrid [primaryKey]="'customerId'" [autoGenerate]="true" [height]="'600px'" [width]="'100%'">
    <igx-row-island [key]="'Orders'" [primaryKey]="'orderId'" [autoGenerate]="true">
        <igx-row-island [key]="'Details'" [primaryKey]="'productId'" [autoGenerate]="true">
        </igx-row-island>
    </igx-row-island>
</igx-hierarchical-grid>

コードでエンドポイントからデータを取得後に、#hGrid 参照を使用して、ルートグリッドのデータを簡単に設定できます。展開されている子にデータを設定する方法は異なります。

行がはじめて展開されたときに新しく子グリッド IgxHierarchicalGrid が描画されるため、データを設定するために新しく作成されたグリッドの参照を取得する必要があります。そのため、各 RowIsland コンポーネントは、特定の子アイランドに新しい子グリッドが作成されたときに発生する gridCreated イベントを提供します。このイベントを使用して、新しいグリッドの参照を取得し、エンドポイントにデータを要求して適用することができます。

エンドポイントには、行アイランドのキー、親行の主キー、およびその一意の識別子のみが必要なため、すべての行アイランドに対して同じメソッドを使用できます。このすべての情報は、イベント引数から直接アクセスできます。

読み込みインジケーターの設定

空グリッドを表示する代わりに、データがまだ読み込み中であることをユーザーに示すことで、ユーザーエクスペリエンスを向上させることができます。その目的で、HierarchicalGrid は、グリッドが空のときに表示できる読み込みインジケーターをサポートします。

データが存在しない間は、isLoading プロパティを true に設定することで読み込みインジケーターを表示します。データが読み込まれるまでルートグリッドにあらかじめ設定しますが、新しい子グリッドを作成する際にも必要です。テンプレートでは常にこれを true に設定できますが、サービスが空の配列を返す場合はインジケーターを非表示にして (false に設定して)、グリッドにデータがないことを表示します。

最後に、autoGenerate プロパティを false に設定にし、マークアップで列コレクションを定義します。

すべての変更を加えたテンプレートファイル hierarchical-grid-lod.component.html は以下のようになります。

    <igx-hierarchical-grid #hGrid [data]="remoteData" [isLoading]="true" [primaryKey]="'customerId'" [autoGenerate]="false" [height]="'580px'" [width]="'100%'" [igxPreventDocumentScroll]="true" [allowAdvancedFiltering]="true" [schema]="schema" (advancedFilteringExpressionsTreeChange)="refreshRootGridData()">
            <igx-grid-toolbar></igx-grid-toolbar>

            <igx-column field="customerId" [dataType]="'string'"></igx-column>
            <igx-column field="companyName" [dataType]="'string'"></igx-column>
            <igx-column field="contactName" [dataType]="'string'"></igx-column>
            <igx-column field="contactTitle" [dataType]="'string'"></igx-column>

        <igx-row-island #rowIsland1 [key]="'Orders'" [primaryKey]="'orderId'" [autoGenerate]="false" (gridCreated)="gridCreated($event)">
            <igx-column field="orderId"></igx-column>
            <igx-column field="customerId"></igx-column>
            <igx-column field="shipVia"></igx-column>
            <igx-column field="freight"></igx-column>

            <igx-row-island #rowIsland2 [key]="'Details'" [primaryKey]="'orderId'" [autoGenerate]="false" (gridCreated)="gridCreated($event)">
                <igx-column field="orderId"></igx-column>
                <igx-column field="productId"></igx-column>
                <igx-column field="unitPrice"></igx-column>
                <igx-column field="quantity"></igx-column>
                <igx-column field="discount"></igx-column>
            </igx-row-island>
        </igx-row-island>
    </igx-hierarchical-grid>

高度なフィルタリング

ロードオンデマンドで IgxHierarchicalGrid の高度なフィルタリングを使用するには、グリッドの schema プロパティを、階層構造を持つエンティティに設定し、子エンティティとフィールドをそのデータタイプで指定する必要があります。これにより、子グリッドのデータが読み込まれる前にネストされたクエリを含むフィルタリング式を作成でき、グリッドはこれらのフィルタをデータに正しく解釈して適用することができます。

この例では、これが正しい階層構造です:

public schema: EntityType[] = [
    {
        name: 'Customers',
        fields: [
            { field: 'customerId', dataType: 'string' },
            { field: 'companyName', dataType: 'string' },
            { field: 'contactName', dataType: 'string' },
            { field: 'contactTitle', dataType: 'string' }
        ],
        childEntities: [
            {
                name: 'Orders',
                fields: [
                    { field: 'customerId', dataType: 'string' },
                    { field: 'orderId', dataType: 'number' },
                    { field: 'employeeId', dataType: 'number' },
                    { field: 'shipVia', dataType: 'string' },
                    { field: 'freight', dataType: 'number' }
                ],
                childEntities: [
                    {
                        name: 'Details',
                        fields: [
                            { field: 'orderId', dataType: 'number' },
                            { field: 'productId', dataType: 'number' },
                            { field: 'unitPrice', dataType: 'number' },
                            { field: 'quantity', dataType: 'number' },
                            { field: 'discount', dataType: 'number' }
                        ]
                    }
                ]
            }
        ]
    }
];

初期フィルターの設定

ルートグリッドが最初に読み込まれたときにフィルター処理されるように、グリッドに初期フィルタリングルールを追加しましょう。FilteringExpressionsTree を作成し、ngOnInit ライフサイクルフックを使用して IgxHierarchicalGrid の advancedFilteringExpressionsTree プロパティに設定します。

例えば、注文の運賃が少なくとも 500 である顧客をフィルタリングするとします。フィルタリング式でネストされたクエリを作成する機能を利用すると、次のようになります:

public ngOnInit() {
    const ordersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Orders', ['customerId']);
    ordersTree.filteringOperands.push({
        fieldName: 'freight',
        ignoreCase: false,
        condition: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo'),
        conditionName: IgxNumberFilteringOperand.instance().condition('greaterThanOrEqualTo').name,
        searchVal: '500'
    });

    const customersTree = new FilteringExpressionsTree(FilteringLogic.And, undefined, 'Customers', ['customerId', 'companyName', 'contactName', 'contactTitle']);
    customersTree.filteringOperands.push({
        fieldName: 'customerId',
        condition: IgxStringFilteringOperand.instance().condition('inQuery'),
        conditionName: IgxStringFilteringOperand.instance().condition('inQuery').name,
        ignoreCase: false,
        searchTree: ordersTree
    });
    this.hGrid.advancedFilteringExpressionsTree = customersTree;
}

エンドポイントへの接続

ブラウザーが提供する XMLHttpRequest インターフェイスを使用して、HTTP プロトコルでエンドポイントと通信します。これをより簡単に行うために、簡素化されたクライアント HTTP API を提供する Angular の HttpClient モジュールを使用します。

ルートグリッドデータの取得

Northwind WebAPI は、IFilteringExpressionsTree をパラメーターとして受け入れる POST エンドポイントを提供します。これを使用して、IgxHierarchicalGrid の高度なフィルタリング機能を活用し、ルートグリッドのレコードをフィルターします。これを refreshRootGridData メソッドで実行します。

public refreshRootGridData() {
    const tree = this.hGrid.advancedFilteringExpressionsTree;
    this.hGrid.isLoading = true;
    if (tree) {
        this.http.post(`${API_ENDPOINT}/QueryBuilder/ExecuteQuery`, tree).subscribe(data =>{
            this.remoteData = Object.values(data)[0];
            this.hGrid.isLoading = false;
            this.hGrid.cdr.detectChanges();
        });
    } else {
        this.http.get(`${API_ENDPOINT}/Customers`).subscribe(data => {
            this.remoteData = Object.values(data);
            this.hGrid.isLoading = false;
            this.hGrid.cdr.detectChanges();
        });
    }
}

ご覧のとおり、this.http は HttpCLient モジュールへの参照になります。subscribe メソッドは Angular の Observable の一部であり、HTTP リクエストからの非同期応答を処理するために使用されます。データが受信されると、取得したデータを関連するグリッドに割り当て、読み込み状態を false に更新し、変更検出をトリガーして UI に変更が反映されるようにします。

ルートグリッドが初期表示された後にデータを読み込むために、ngAfterViewInit ライフサイクルフックを使用して refreshRootGridData メソッドを呼び出します。

public ngAfterViewInit() {
    this.refreshRootGridData();
}

子グリッドデータの取得

次に、子グリッドのデータを取得するために、GET リクエストの URL をどのように構築するかを定義します。これはテーブル間の関係を視覚的に表現したものです。

最後に、作成された新しい子グリッドのデータを要求する gridCreated メソッドを実装する必要があります。これはルートレベルのグリッドデータを取得する場合と似ていますが、今回はイベント gridCreated で提供されたデータを使用し、それを使用して URL を構築します。

public gridCreated(event: IGridCreatedEventArgs) {
    event.grid.isLoading = true;
    const url = this.buildUrl(event);
    this.http.get(url).subscribe(data => {
        event.grid.data = Object.values(data);
        event.grid.isLoading = false;
        this.hGrid.cdr.detectChanges();
    });
}

private buildUrl(event: IGridCreatedEventArgs) {
    const parentKey = (event.grid.parent as any).key ?? this.schema[0].name;
    const url = `${API_ENDPOINT}/${parentKey}/${event.parentID}/${event.owner.key}`;
    return url;
}

API リファレンス

その他のリソース

Hierarchical Grid コンポーネント

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

階層グリッド ロードオンデマンド

Angular 階層グリッド ロードオンデマンドの例