Hierarchical Grid Batch Editing and Transactions

The Batch Editing feature of the IgxHierarchicalGrid is based on the HierarchicalTransactionService. Follow the Transaction Service class hierarchy topic to see an overview of the igxHierarchicalTransactionService and details how it is implemented.

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

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



Transaction state consists of all the updated, added and deleted rows, and their last states.


To get started import the IgxHierarchicalGridModule in the app.module.ts file:

// app.module.ts

import { IgxHierarchicalGridModule } from 'igniteui-angular';

    imports: [..., IgxHierarchicalGridModule],
export class AppModule {}

Then you need to define the igxTransactionService as a provider for the Hierarchical Grid or for some of its parent components:

import { Component } from "@angular/core";
import { IgxHierarchicalTransactionServiceFactory } from "igniteui-angular";
    providers: [ IgxHierarchicalTransactionServiceFactory ],
    selector: "app-hierarchical-grid-with-transactions",
    template: "<ng-content></ng-content>"
export class HierarchicalGridWithTransactionsComponent { }

IgxGridTransaction is an injection token defined by the grid.

Then define a Hierarchical Grid with bound data source and rowEditable set to true and bind:

    <igx-hierarchical-grid #parentGridProducts [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
        <igx-row-island #rowIslandShipments [key]="'Shipments'" [primaryKey]="'ShipmentID'" [rowEditable]="true">
<button igxButton [disabled]="!productsUndoEnabled" (click)="productsUndo()">Undo Products</button>
<button igxButton [disabled]="!productsRedoEnabled" (click)="productsRedo()">Redo Products</button>
<button igxButton [disabled]="!shipmentsUndoEnabled" (click)="shipmentsUndo()">Undo Shipments</button>
<button igxButton [disabled]="!shipmentsRedoEnabled" (click)="shipmentsRedo()">Redo Shipments</button>
<button igxButton (click)="productsCommit()">Commit Products</button>
<button igxButton (click)="productsDiscard()">Discard Products</button>
<button igxButton (click)="shipmentsCommit()">Commit Shipments</button>
<button igxButton (click)="shipmentsDiscard()">Discard Shipments</button>

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

export class HierarchicalGridBatchEditingSampleComponent {
    @ViewChild("parentGridProducts", { read: IgxHierarchicalGridComponent }) public parentGridProducts: IgxHierarchicalGridComponent;
    @ViewChild("rowIslandShipments", { read: IgxRowIslandComponent }) public rowIslandShipments: IgxRowIslandComponent;
    public get productsUndoEnabled(): boolean {
        return this.parentGridProducts.transactions.canUndo;
    public get productsRedoEnabled(): boolean {
        return this.parentGridProducts.transactions.canRedo;
    public get shipmentsUndoEnabled(): boolean {
        return this.rowIslandShipments.transactions.canUndo;
    public get shipmentsRedoEnabled(): boolean {
        return this.rowIslandShipments.transactions.canRedo;
    public productsUndo() {
    public productsRedo() {
    public shipmentsUndo() {
    public shipmentsRedo() {
    public productsCommit() {
    public productsDiscard() {
     public shipmentsCommit() {
    public shipmentsDiscard() {

Disabling rowEditable property will modify Hierarchical Grid 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.