Angular Tree Grid Batch Editing and Transactions
The Batch Editing feature of the IgxTreeGrid 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.
Below is a detailed example of how is Batch Editing enabled for the Tree Grid component.
Angular Tree Grid Batch Editing and Transactions Example
The following sample demonstrates a scenario, where the treeGrid has batchEditing
enabled and has row editing enabled. The latter will ensure that transaction will be added after the entire row edit is confirmed.
Note
Transaction state consists of all the updated, added and deleted rows, and their last states.
Usage
To get started import the IgxTreeGridModule
in the app.module.ts file:
// app.module.ts
...
import { IgxTreeGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxTreeGridModule],
...
})
export class AppModule {}
Then, all you need to do is enable batchEditing
from your Tree Grid:
<igx-tree-grid [data]="data" [batchEditing]="true">
...
</igx-tree-grid>
This will ensure a proper instance of Transaction
service is provided for the igx-tree-grid. The proper TransactionService
is provided through a TransactionFactory
. You can learn more about this internal implementation in the transactions topic.
After batch editing is enabled, define a IgxTreeGrid
with bound data source and rowEditable
set to true and bind:
<igx-tree-grid #treeGrid [batchEditing]="true" [data]="data" primaryKey="employeeID" foreignKey="PID"
width ="100%" height ="500px" rowEditable=true>
...
</igx-tree-grid>
...
<button igxButton (click)="addRow()">Add Root Level Row</button>
<button igxButton [disabled]="!treeGrid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!treeGrid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="treeGrid.transactions.getAggregatedChanges(false).length < 1"
(click)="openCommitDialog()">Commit</button>
...
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();
}
}
Note
The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, Tree Grid
would stay in edit mode. One way to do that is by calling endEdit
in the respective method.
Deleting a parent node in Tree Grid
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 Tree Grid
. This property indicates whether the child records should be deleted when their parent gets deleted (by default, it is set to true
).
Note
Disabling rowEditable
property will modify Tree Grid
to create transactions on cell change and will not expose row editing overlay in the UI.
API References
Additional Resources
- Build CRUD operations with igxGrid
- Tree Grid Overview
- Tree Grid Editing
- Tree Grid Row Editing
- Tree Grid Row Adding