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

    O recurso de edição em lote do IgxHierarchicalGrid é 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.

    Para usar o HierarchicalTransactionService with IgxHierarchicalGrid, mas acumular logs de transações separados para cada ilha, uma fábrica de serviços deve ser fornecida. Um é exportado e pronto para uso como IgxHierarchicalTransactionServiceFactory.

    Abaixo está um exemplo detalhado de como a edição em lote é ativada para o componente Grade hierárquica.

    Angular Hierarchical Grid Batch Editing and Transactions Example

    O exemplo a seguir demonstra um cenário em que o hierarchicalGrid foi batchEditing habilitado 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 IgxHierarchicalGridModule no arquivo app.module.ts:

    // app.module.ts

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

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

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

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

    Isso garantirá que uma instância adequada de Transaction serviço seja fornecida para a grade hierárquica igx. 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 IgxHierarchicalGrid dados com limite e rowEditable defina como true e bind:

    <igx-hierarchical-grid #hierarchicalGrid [batchEditing]="true" [data]="data" [primaryKey]="'Artist'"
    [height]="'580px'" [width]="'100%'" [rowEditable]="true" >
    ...
    <igx-row-island #childGrid [key]="'Albums'" [primaryKey]="'Album'" [rowEditable]="true">
        <igx-grid-toolbar></igx-grid-toolbar>
        ...
        <ng-template igxToolbarCustomContent let-grid="grid">
            <button igxButton [disabled]="!grid.transactions.canUndo" (click)="undo(grid)">Undo</button>
            <button igxButton [disabled]="!grid.transactions.canRedo" (click)="redo(grid)">Redo</button>
        </ng-template>
    </igx-row-island>
</igx-hierarchical-grid>
...
<div class="buttons-row">
    <div class="buttons-wrapper">
        <button igxButton [disabled]="!undoEnabledParent" (click)="undo(hierarchicalGrid)">Undo Parent</button>
        <button igxButton [disabled]="!redoEnabledParent" (click)="redo(hierarchicalGrid)">Redo Parent</button>
    </div>
</div>
...

    O código a seguir demonstra o uso da transactions API - desfazer, refazer, confirmar.

    ...
export class HierarchicalGridBatchEditingSampleComponent {
    public undo(grid: any) {
        /* exit edit mode and commit changes */
        grid.endEdit(true);
        grid.transactions.undo();
    }

    public redo(grid: any) {
        /* exit edit mode and commit changes */
        grid.endEdit(true);
        grid.transactions.redo();
    }

    public commit() {
        this.hierarchicalGrid.transactions.commit(this.data);
        this.childGrid.hgridAPI.getChildGrids().forEach((grid) => {
            grid.transactions.commit(grid.data);
        });
        this.dialogChanges.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, Hierarchical Grid permaneceria no modo de edição. Uma maneira de fazer isso é chamando endEdit o respectivo método.

    Note

    Desabilitar rowEditable a propriedade modificará Hierarchical 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.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.