Web Components Tree Grid Batch Editing and Transactions

The Batch Editing feature of the IgcTreeGrid is based on the HierarchicalTransactionService.

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

Web Components Tree Grid Batch Editing and Transactions Example

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

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

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

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

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

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

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

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

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

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

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

export class TreeGridBatchEditingSampleComponent {
    @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;

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

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

    public commit() {
        this.treeGrid.transactions.commit(this.data);
        this.dialog.close();
    }
}

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

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

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

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

Deleting a parent node in IgcTreeGrid has some peculiarities. If you are using a hierarchical data, the children will be deleted when deleting their parent. If you are using a flat data, you may set the desired behavior using the CascadeOnDelete property of IgcTreeGrid. This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to true).

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