Web Components Grid Batch Editing and Transactions

The Batch Editing feature of the IgcGrid is based on the IgcTransactionService.

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

Web Components Grid Batch Editing and Transactions Example

The following sample demonstrates a scenario, where the IgcGrid has IgcGrid.batchEditing enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.

Usage

You need to enable IgcGrid.batchEditing from your Grid:

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

This will ensure a proper instance of Transaction service is provided for the IgcGrid. The proper IgcTransactionService is provided through a TransactionFactory.

After batch editing is enabled, define a IgcGrid with bound data source and IgcGrid.rowEditable set to true and bind:

<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();
}

The following code demonstrates the usage of the 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 References

Additional Resources

Our community is active and always welcoming to new ideas.

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