Hierarchical Grid 一括編集とトランザクション
IgxHierarchicalGrid の一括編集機能は、HierarchicalTransactionService に基づいています。トランザクション サービス クラス階層トピックに従って、igxHierarchicalTransactionService の概要と実装方法の詳細を確認してください。
HierarchicalTransactionService と IgxHierarchicalGridComponent を使用した場合も各アイランドに個別のトランザクション ログを累積させるには、代わりにサービス ファクトリが必要です。エクスポートされると IgxHierarchicalTransactionServiceFactory として利用できます。
以下は、IgxHierarchicalGrid コンポーネントで一括編集を有効にする方法の詳細な例です。
Angular Hierarchical Grid 一括編集とトランザクションの例
このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。
Note
トランザクション ステートは、すべての更新、追加、削除された行、そして最後のステートで構成されます。
使用方法
IgxHierarchicalGridModule を app.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 で行編集オーバーレイを公開しません。
