The Batch Editing feature of the IgxGrid is based on the TransactionService. Follow the Transaction Service class hierarchy topic to see an overview of the igxTransactionService and details how it is implemented.
Below is a detailed example of how is Batch Editing enabled for the Grid component.
Angular Grid Batch Editing and Transactions ExampleThe following sample demonstrates a scenario, where the grid has 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.
UsageTo get started import the IgxGridModule in the app.module.ts file:
// app.module.ts
...
import { IgxGridModule } from 'igniteui-angular';
@NgModule({
...
imports: [..., IgxGridModule],
...
})
export class AppModule {}
Then, all you need to do is enable batchEditing from your Grid:
<igx-grid [data]="data" [batchEditing]="true">
...
</igx-grid>
This will ensure a proper instance of Transaction service is provided for the igx-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 IgxGrid with bound data source and rowEditable set to true and bind:
<igx-grid #grid [batchEditing]="true" [data]="data" [primaryKey]="'ProductID'" width="100%" height="500px"
[rowEditable]="true">
...
</igx-grid>
...
<button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo()">Undo</button>
<button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo()">Redo</button>
<button igxButton [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
(click)="openCommitDialog(dialogGrid)">Commit</button>
...
The following code demonstrates the usage of the transactions API - undo, redo, commit.
export class GridBatchEditingSampleComponent {
@ViewChild('grid', { read: IgxGridComponent }) public gridRowEditTransaction: IgxGridComponent;
public undo() {
/* exit edit mode and commit changes */
this.grid.endEdit(true);
this.grid.transactions.undo();
}
public redo() {
/* exit edit mode and commit changes */
this.grid.endEdit(true);
this.grid.transactions.redo()
}
public commit() {
this.grid.transactions.commit(this.data);
this.toggle.close();
}
}
The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, Grid would stay in edit mode. One way to do that is by calling endEdit in the respective method.
Disabling rowEditable property will modify Grid to create transactions on cell change and will not expose row editing overlay in the UI.
Check out the full demo configuration
API References Additional Resources Our community is active and always welcoming to new ideas.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4