React Hierarchical Grid Batch Editing and Transactions

In order to use the HierarchicalTransactionService with IgrHierarchicalGrid, 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 HierarchicalTransactionServiceFactory.

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

React Hierarchical Grid Batch Editing and Transactions Example

The following sample demonstrates a scenario, where the IgrHierarchicalGrid has IgrHierarchicalGrid.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 IgrHierarchicalGrid.batchEditing from your Hierarchical Grid:

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

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

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

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

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

API References

Additional Resources

Our community is active and always welcoming to new ideas.

• Ignite UI for React Forums
• Ignite UI for React GitHub