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

    La función de edición por lotes de IgxHierarchicalGrid se basa en TransactionService. Siga el tema Transaction Service class hierarchy para ver una descripción general de igxTransactionService y detalles sobre cómo se implementa.

    Para utilizar HierarchicalTransactionService con IgxHierarchicalGrid, pero acumular registros de transacciones separados para cada isla, se debe proporcionar una fábrica de servicios. Uno se exporta y está listo para usar como 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.

    Ejemplo de edición por lotes y transacciones en cuadrícula jerárquica Angular

    El siguiente ejemplo muestra un escenario en el que hierarchicalGrid tiene habilitada batchEditing y la edición de filas. Esto último garantizará que la transacción se agregue después de que se confirme la edición completa de la fila.

    EXAMPLE
    TS
    HTML
    SCSS
    Edit in:

    ¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Angular completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.

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

    Uso

    Para comenzar, importe IgxHierarchicalGridModule en el archivo app.module.ts:

    // app.module.ts

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

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

    Luego, todo lo que necesitas hacer es habilitar batchEditing desde tu cuadrícula jerárquica:

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

    Esto garantizará que se proporcione una instancia adecuada del servicio Transaction para igx-hierarchical-grid. El TransactionService adecuado se proporciona a través de TransactionFactory. Puede obtener más información sobre esta implementación interna en el tema de transacciones.

    Después de habilitar la edición por lotes, defina un IgxHierarchicalGrid con la fuente de datos vinculada y rowEditable establecido en verdadero y vincule:

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

html

    El siguiente código demuestra el uso de la API transactions: deshacer, rehacer y 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();
    }
}
typescript

    La API de transacciones no se encargará del final de la edición y deberá hacerlo usted mismo. De lo contrario, Hierarchical Grid permanecería en modo de edición. Una forma de hacerlo es llamando endEdit en el método respectivo.

    Al deshabilitar la propiedad rowEditable se modificará Hierarchical Grid para crear transacciones en el cambio de celda y no se expondrá la superposición de edición de filas en la interfaz de usuario.

    Referencias de API

    Recursos adicionales

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