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

    O recurso de Edição em Lote do IgxHierarchicalGrid é baseado noTransactionService. Siga oTransaction Service class hierarchy tópico para ver uma visão geral eigxTransactionService detalhes sobre como ele é implementado.

    Para usar oHierarchicalTransactionService withIgxHierarchicalGrid, mas acumular logs de transação separados para cada ilha, uma fábrica de serviços deve ser fornecida em vez disso. Um é exportado e pronto para uso comoIgxHierarchicalTransactionServiceFactory.

    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 estábatchEditing ativado 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 oIgxHierarchicalGridModule arquivo no 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 é ativarbatchEditing a partir da sua Grade Hierárquica:

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

    Isso garantirá que uma instância adequada deTransaction serviço seja fornecida para a grade hierárquica 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 umaIgxHierarchicalGrid com fonte de dados vinculada erowEditable 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 datransactions API - desfazer, refazer, commitir.

    ...
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 vai lidar com o fim da edição e você teria que fazer isso sozinho. Caso contrário,Hierarchical Grid ficaria no modo de edição. Uma forma de fazer isso é chamandoendEdit o método respectivo.

    Note

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

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.