Premium

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

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

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

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

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

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

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

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

使用方法

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

// app.module.ts

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

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

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

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

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

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

トランザクション API は編集の終了を処理しないので、自分で行う必要があります。そうしないと、Pivot 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 プロパティを無効にすると Pivot Grid を変更してセル変更でトランザクションを作成し、UI で行編集オーバーレイを公開しません。

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

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

API リファレンス

その他のリソース

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