Premium

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

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

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

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

In order to use the HierarchicalTransactionService with IgxHierarchicalGrid, but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as HierarchicalTransactionService.

Below is a detailed example of how is Batch Editing enabled for the Hierarchical Grid component.

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

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

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

Transaction state consists of all the updated, added and deleted rows, and their last states.

使用方法

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 を定義し、バインドします。

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

<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>
...

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

The following code demonstrates the usage of the IgxGridComponent.transactions API - undo, redo, commit.

...
export class HierarchicalGridBatchEditingSampleComponent {
    public undo(grid: any) {
        /* exit edit mode and commit changes */
        grid.endEdit(true);
        grid.transactions.undo();
    }

    public redo(grid: any) {
        /* 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();
    }
}

The transactions API won’t handle end of edit and you’d need to do it by yourself. Otherwise, Hierarchical Grid would stay in edit mode. One way to do that is by calling endEdit in the respective method.

Disabling rowEditable property will modify Hierarchical Grid to create transactions on cell change and will not expose row editing overlay in the UI.

API リファレンス

HierarchicalTransactionService

その他のリソース

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