Web Components Tree Grid 一括編集とトランザクション

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

Web Components Tree Grid 一括編集とトランザクションの例

次のサンプルは、IgcTreeGrid で BatchEditing が有効になっており、行編集が有効になっているシナリオを示しています。行編集全体を確定後にトランザクションが追加されるようにします。

使用方法

Tree Grid から BatchEditing を有効にする必要があります。

<igc-tree-grid [data]="data" [batchEditing]="true">
</igc-tree-grid>

これにより、Transaction サービスの適切なインスタンスが IgcTreeGrid に提供されます。適切な IgcTransactionService は TransactionFactory を通じて提供されます。

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

<igc-tree-grid id="treeGrid" batch-editing="true" primary-key="ProductID" foreign-key="PID"
    width="100%" height="500px" row-editable="true">
</igc-tree-grid>

<button id="undo">Undo</button>
<button id="redo">Redo</button>
<button id="commit">Commit</button>

constructor() {
    var treeGrid = this.treeGrid = document.getElementById('grid') as IgcTreeGridComponent;
    var undo = this.undo = document.getElementById('undo') as HTMLButtonElement;
    var redo = this.redo = document.getElementById('redo') as HTMLButtonElement;
    var commit = this.commit = document.getElementById('commit') as HTMLButtonElement;
}

this._bind = () => {
    treeGrid.data = this.data;
    undo.addEventListener('click', this.OnUndoClick);
    redo.addEventListener('click', this.OnRedoClick);
    commit.addEventListener('click', this.OnCommitClick);
}
this._bind();

private OnCommitClick() {
    if (this.treeGrid.transactions.getAggregatedChanges(false).length > 0)
        this.treeGrid.transactions.commit(this.data);
}

private OnUndoClick() {
    if (this.treeGrid.transactions.canUndo)
        this.treeGrid.transactions.undo();
}

private OnRedoClick() {
    if (this.treeGrid.transactions.canRedo)
        this.treeGrid.transactions.redo();
}

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

<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
    [rowEditable]="true">
</igx-grid>

<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
    (click)="openCommitDialog(dialogGrid)">Commit</button>

<IgbGrid @ref="grid" BatchEditing="true" Data=data PrimaryKey=primaryKey Width="100%" Height="500px"
    RowEditable="true">
</IgbGrid>
<button @onclick="OnCommitClick" disabled="@grid.transactions.getAggregatedChanges(false).length < 1">Commit</button>
<button @onclick="OnUndoClick" disabled="!@grid.transactions.canUndo">Undo</button>
<button @onclick="OnRedoClick" disabled="!@grid.transactions.canRedo">Redo</button>
@code {
    private string primaryKey = "ProductID";
    private IgbGrid grid;

    protected override async Task OnInitializedAsync() => forecasts = await ForecastService.GetForecastAsync(DateTime.Now);

    private void OnCommitClick(MouseEventArgs e)
    {
        this.grid.transactions.commit(this.data);
    }

    private void OnUndoClick(MouseEventArgs e)
    {
        this.grid.transactions.undo();
    }

    private void OnRedoClick(MouseEventArgs e)
    {
        this.grid.transactions.redo();
    }
}

IgcTreeGrid 内の親ノードの削除にはいくつかの特徴があります。階層データを使用している場合、親を削除すると子も削除されます。フラットデータを使用している場合、IgcTreeGrid の CascadeOnDelete プロパティを使用して必要な動作を設定できます。このプロパティは、親が削除されたときに子レコードを削除するかどうかを示します (デフォルトでは true に設定されています)。

API リファレンス

Transactions

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub