Hierarchical Grid 一括編集とトランザクション

IgxHierarchicalGrid の一括編集機能は、HierarchicalTransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxHierarchicalTransactionService の概要と実装方法の詳細を確認してください。

HierarchicalTransactionServiceIgxHierarchicalGridComponent を使用した場合も各アイランドに個別のトランザクション ログを累積させるには、代わりにサービス ファクトリが必要です。エクスポートされると IgxHierarchicalTransactionServiceFactory として利用できます。

以下は、IgxHierarchicalGrid コンポーネントで一括編集を有効にする方法の詳細な例です。

Angular Hierarchical Grid 一括編集とトランザクションの例

このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

Note

トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。

使用方法

IgxHierarchicalGridModuleapp.module.ts ファイルにインポートします。

// app.module.ts

...
import { IgxHierarchicalGridModule } from 'igniteui-angular';

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

igxTransactionService を Hierarchical Grid として、またはその親コンポーネントとして定義する必要があります。

import { Component } from "@angular/core";
import { IgxHierarchicalTransactionServiceFactory } from "igniteui-angular";
@Component({
    providers: [ IgxHierarchicalTransactionServiceFactory ],
    selector: "app-hierarchical-grid-with-transactions",
    template: "<ng-content></ng-content>"
})
export class HierarchicalGridWithTransactionsComponent { }
Note

IgxGridTransaction はグリッドで定義されたインジェクション トークンです。

次に Hierarchical Grid をバインドしたデータソースで定義し、rowEditable を true に設定してバインドします。

<app-hierarchical-grid-with-transactions>
    <igx-hierarchical-grid igxPreventDocumentScroll #hierarchicalGrid class="hgrid" [data]="localdata" [primaryKey]="'Artist'"
        [rowEditable]="true" [height]="'580px'" [width]="'100%'">
        <igx-column field="Artist" header="Artist" [editable]="false" [dataType]="'string'"></igx-column>
        <igx-column field="HasGrammyAward" header="Has Grammy Award?" [editable]="true" [dataType]="'boolean'">
        </igx-column>
        ...
        <igx-row-island [key]="'Albums'" #layout1 [primaryKey]="'Album'" [rowEditable]="true" [showToolbar]="true">
            ...
            <ng-template igxToolbarCustomContent let-grid="grid">
                <button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo(grid)">Undo</button>
                <button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo(grid)">Redo</button>
            </ng-template>
        </igx-row-island>
    </igx-hierarchical-grid>
</app-hierarchical-grid-with-transactions>
...
<div class="buttons-row">
    <div class="buttons-wrapper">
        <button igxButton [disabled]="!undoEnabledParent" (click)="undo(hierarchicalGrid)">Undo Parent</button>
        <button igxButton [disabled]="!redoEnabledParent" (click)="redo(hierarchicalGrid)">Redo Parent</button>
    </div>
</div>
...

以下のコード例は、transactions API (undo、redo、commit) の使用方法を示します。

...
export class HierarchicalGridBatchEditingSampleComponent {
    @ViewChild("layout1", { static: true })
    private layout1: IgxRowIslandComponent;

    @ViewChild("hierarchicalGrid", { static: true })
    private hierarchicalGrid: IgxHierarchicalGridComponent;

    ...

    public get undoEnabledParent(): boolean {
        return this.hierarchicalGrid.transactions.canUndo;
    }

    public get redoEnabledParent(): boolean {
        return this.hierarchicalGrid.transactions.canRedo;
    }

    public get hasTransactions(): boolean {
        return this.hierarchicalGrid.transactions.getAggregatedChanges(false).length > 0 || this.hasChildTransactions;
    }

    public get hasChildTransactions(): boolean {
        return this.layout1.hgridAPI.getChildGrids()
            .find(c => c.transactions.getAggregatedChanges(false).length > 0) !== undefined;
    }

    ...

    public undo(grid: IgxHierarchicalGridComponent) {
        /* exit edit mode */
        grid.endEdit(/* commit the edit transaction */ false);
        grid.transactions.undo();
    }

    public redo(grid: IgxHierarchicalGridComponent) {
        grid.transactions.redo();
    }

    public commit() {
        this.hierarchicalGrid.transactions.commit(this.localdata);
        this.layout1.hgridAPI.getChildGrids().forEach((grid) => {
            grid.transactions.commit(grid.data);
        });
    }

    public discard() {
        this.hierarchicalGrid.transactions.clear();
        this.layout1.hgridAPI.getChildGrids().forEach((grid) => {
            grid.transactions.clear();
        });
    }
}
Note

トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、グリッドは編集モードのままになります。これを行う 1 つの方法は、それぞれのメソッドで endEdit を呼び出すことです。

Note

rowEditable プロパティを無効にすると Hierarchical Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。

API リファレンス

その他のリソース

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