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

    O recurso de edição em lote do IgxGrid é baseado no TransactionService. Siga o Transaction Service class hierarchy tópico para ver uma visão geral do igxTransactionService e detalhes de como ele é implementado.

    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

    O exemplo a seguir demonstra um cenário em que a grade foi batchEditing habilitada e tem a edição de linha habilitada. O último garantirá que a transação seja adicionada após a confirmação de toda a edição da linha.

    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 o IgxGridModule no arquivo app.module.ts:

    // app.module.ts

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

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

    Então, tudo o que você precisa fazer é habilitar batchEditing a partir de sua grade:

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

    Isso garantirá que uma instância adequada de Transaction serviço seja fornecida para o igx-grid. O adequado TransactionService é fornecido por meio de um TransactionFactory. Você pode saber mais sobre essa implementação interna no tópico de transações.

    Depois que a edição em lote estiver habilitada, defina uma fonte de IgxGrid dados com limite e rowEditable 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 da transactions API - desfazer, refazer, confirmar.

    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 lida com o fim da edição e você precisa fazer isso sozinho. Caso contrário, Grid permaneceria no modo de edição. Uma maneira de fazer isso é chamando endEdit o respectivo método.

    Note

    Desabilitar rowEditable a propriedade modificará Grid para criar transações na alteração da célula e não exporá a sobreposição de edição de linha na interface do usuário.

    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.