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

    The Batch Editing feature of the IgxHierarchicalGrid 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.

    In order to use the HierarchicalTransactionService with IgxHierarchicalGrid, but have it accumulating separate transaction logs for each island, a service factory should be provided instead. One is exported and ready for use as 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

    The following sample demonstrates a scenario, where the hierarchicalGrid 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 oIgxHierarchicalGridModule arquivo no app.module.ts:

    // app.module.ts

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

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

    Then, all you need to do is enable batchEditing from your Hierarchical Grid:

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

    This will ensure a proper instance of Transaction service is provided for the igx-hierarchical-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 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.