Web Components Hierarchical Grid Batch Editing and Transactions
In order to use the HierarchicalTransactionService with IgcHierarchicalGrid, 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 IgcHierarchicalGrid component.
Web Components Hierarchical Grid Batch Editing and Transactions Example
The following sample demonstrates a scenario, where the IgcHierarchicalGrid has IgcHierarchicalGrid.batchEditing enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.
Transaction state consists of all the updated, added and deleted rows, and their last states.
Usage
You need to enable IgcHierarchicalGrid.batchEditing from your Hierarchical Grid:
<igc-hierarchical-grid [data]="data" [batchEditing]="true">
</igc-hierarchical-grid>This will ensure a proper instance of Transaction service is provided for the IgcHierarchicalGrid. The proper IgcTransactionService is provided through a TransactionFactory.
After batch editing is enabled, define a IgcHierarchicalGrid with bound data source and IgcHierarchicalGrid.rowEditable set to true and bind:
The following code demonstrates the usage of the IgcTransactionService 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();
}
}The transactions API won’t handle end of edit and you’d need to do it by yourself. Otherwise, IgcHierarchicalGrid would stay in edit mode. One way to do that is by calling EndEdit in the respective method.
Disabling IgcHierarchicalGrid.rowEditable property will modify IgcHierarchicalGrid to create transactions on cell change and will not expose row editing overlay in the UI.
API References
Additional Resources
Our community is active and always welcoming to new ideas.