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

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

    HierarchicalTransactionService を IgxHierarchicalGrid と一緒に使用し、アイランドごとに個別のトランザクション ログを蓄積するには、代わりにサービス ファクトリを提供する必要があります。IgxHierarchicalTransactionServiceFactory として使用できるようになります。

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

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

    以下のサンプルは、hierarchicalGrid にプロバイダーのトランザクションがあり、batchEditing と行編集が有効にされています。行編集全体を確定後にトランザクションが追加されるようにします。

    Note

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

    使用方法

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

    // app.module.ts

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

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

    次に、Hierarchical Grid から batchEditing を有効にします。

    <igx-hierarchical-grid [data]="data" [batchEditing]="true">
  ...
</igx-hierarchical-grid>

    これにより、igx-hierarchical-grid に Transaction サービスの適切なインスタンスが提供されます。適切な TransactionService は TransactionFactory を通じて提供されます。この内部実装の詳細については、トランザクション トピックを参照してください。

    一括編集を有効にした後、バインドされたデータ ソースと rowEditable を true に設定して IgxHierarchicalGrid を定義し、バインドします。

    <igx-hierarchical-grid #hierarchicalGrid [batchEditing]="true" [data]="data" [primaryKey]="'Artist'"
    [height]="'580px'" [width]="'100%'" [rowEditable]="true" >
    ...
    <igx-row-island #childGrid [key]="'Albums'" [primaryKey]="'Album'" [rowEditable]="true">
        <igx-grid-toolbar></igx-grid-toolbar>
        ...
        <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>
...
<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 {
    public undo(grid: IgxHierarchicalGridComponent) {
        /* exit edit mode and commit changes */
        grid.endEdit(true);
        grid.transactions.undo();
    }

    public redo(grid: IgxHierarchicalGridComponent) {
        /* exit edit mode and commit changes */
        grid.endEdit(true);
        grid.transactions.redo();
    }

    public commit() {
        this.hierarchicalGrid.transactions.commit(this.data);
        this.childGrid.hgridAPI.getChildGrids().forEach((grid) => {
            grid.transactions.commit(grid.data);
        });
        this.dialogChanges.close();
    }
}
    Note

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

    Note

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

    API リファレンス

    その他のリソース

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