Edición por lotes y transacciones en cuadrículas jerárquicas Angular

    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.

    A continuación se muestra un ejemplo detallado de cómo se habilita la edición por lotes para el componente Cuadrícula jerá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

    El estado de la transacción consta de todas las filas actualizadas, agregadas y eliminadas, y sus últimos estados.

    Usage

    Para empezar, importa elIgxHierarchicalGridModule archivo en el 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.

    Después de habilitar la edición por lotes, define unaIgxHierarchicalGrid fuente de datos con enlace yrowEditable configúralo como verdadero y 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>
...

    El siguiente código demuestra el uso de latransactions API: deshacer, rehacer, hacer commit.

    ...
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

    La API de transacciones no gestionará el final de la edición y tendrías que hacerlo tú mismo. Si no,Hierarchical Grid se quedaría en modo edición. Una forma de hacerlo es llamandoendEdit al método correspondiente.

    Note

    DesactivarrowEditable la propiedad modificaráHierarchical Grid para crear transacciones al cambiar la celda y no expondrá la superposición de edición de filas en la interfaz.

    API References

    Additional Resources

    Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.