Angular Pivot Grid Batch Editing and Transactions

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

    Angular Pivot Grid Batch Editing and Transactions Example

    The following sample demonstrates a scenario, where the pivotGrid 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 IgxPivotGridModule in the app.module.ts file:

    // app.module.ts

...
import { IgxPivotGridModule } from 'igniteui-angular';

@NgModule({
    ...
    imports: [..., IgxPivotGridModule],
    ...
})
export class AppModule {}

    Then, all you need to do is enable batchEditing from your Pivot Grid:

    <igx-pivot-grid [data]="data" [batchEditing]="true">
  ...
</igx-pivot-grid>

    This will ensure a proper instance of Transaction service is provided for the igx-pivot-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 IgxPivotGrid with bound data source and rowEditable set to true and bind:

    Note

    The transactions API won't handle end of edit and you'd need to do it by yourself. Otherwise, Pivot Grid would stay in edit mode. One way to do that is by calling endEdit in the respective method.

    Note

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