Angular Edição e transações em lote de grade

    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.

    Abaixo está um exemplo detalhado de como a edição em lote está habilitada para o componente Grid.

    Angular Grid Batch Editing and Transactions Example

    The 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.

    Note

    O estado da transação consiste em todas as linhas atualizadas, adicionadas e excluídas e seus últimos estados.

    Usage

    Para começar, importe oIgxGridModule arquivo no app.module.ts:

    // 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.

    Após a edição em lote ser ativada, defina umaIgxGrid com fonte de dados vinculada erowEditable defina como true e 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>
...

    O código a seguir demonstra o uso datransactions API - desfazer, refazer, commitir.

    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();
    }
}
    Note

    A API de transações não vai lidar com o fim da edição e você teria que fazer isso sozinho. Caso contrário,Grid ficaria no modo de edição. Uma forma de fazer isso é chamandoendEdit o método respectivo.

    Note

    DesabilitarrowEditable a propriedade vai modificarGrid para criar transações ao mudar a célula e não expor a sobreposição de edição de linha na interface.

    Remote Paging with Batch Editing Demo

    Confira a configuração de demonstração completa

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.