React Tree Grid Batch Editing and Transactions

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

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

React Tree Grid Batch Editing and Transactions Example

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

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

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

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 IgrTreeGrid 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 IgrTreeGrid. 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 React Forums
• Ignite UI for React GitHub