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

    O recurso de Edição em Lote do IgxGrid é baseado noTransactionService. Siga oTransaction Service class hierarchy tópico para ver uma visão geral eigxTransactionService detalhes sobre 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 estábatchEditing ativada e tem a edição de linhas ativada. 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 oIgxGridModule arquivo no app.module.ts:

    // app.module.ts

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

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

    Depois, tudo o que você precisa fazer é ativarbatchEditing a partir da sua Grade:

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

    Isso garantirá que uma instância adequada deTransaction serviço seja fornecida para a grade igx. O direitoTransactionService é fornecido por meio de umTransactionFactory. Você pode aprender mais sobre essa implementação interna no tópico de transações.

    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.