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

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

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

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

使用方法

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

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

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

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

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

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

constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    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 = () => {
    grid.data = this.data;
    undo.addEventListener('click', this.OnUndoClick);
    redo.addEventListener('click', this.OnRedoClick);
    commit.addEventListener('click', this.OnCommitClick);
}
this._bind();

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

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

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

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

export class GridBatchEditingSampleComponent {
    constructor() {
        var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    }

    public undo() {
        /* exit edit mode and commit changes */
        this.grid.endEdit(true);
        this.grid.transactions.undo();
    }

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

    public commit() {
        this.grid.transactions.commit(this.data);
        this.toggle.close();
    }
}

API リファレンス

Transactions

Our community is active and always welcoming to new ideas.

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