Edición por lotes y transacciones en cuadrículas de árboles Angular

    La función de Edición por Lotes de IgxTreeGrid se basa en elHierarchicalTransactionService. Sigue elTransaction Service class hierarchy tema para ver una visión general yigxHierarchicalTransactionService detalles de cómo se implementa.

    A continuación se muestra un ejemplo detallado de cómo se habilita la edición por lotes para el componente Tree Grid.

    Angular Tree Grid Batch Editing and Transactions Example

    El siguiente ejemplo muestra un escenario en el que el treeGrid habatchEditing activado y tiene activada la edición de filas. Esto último asegurará que la transacción se añada después de confirmar toda la edición de la fila.

    Note

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

    Usage

    Para empezar, importa elIgxTreeGridModule archivo en el app.module.ts:

    // app.module.ts

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

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

    Luego, solo tienes que habilitarbatchEditing desde tu Tree Grid:

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

    Esto garantizará que se proporcione una instancia adecuada deTransaction servicio para la cuadrícula de árbol igx. El derechoTransactionService se proporciona a través de unTransactionFactory. Puedes aprender más sobre esta implementación interna en el tema de transacciones.

    Después de habilitar la edición por lotes, define unaIgxTreeGrid fuente de datos con enlace yrowEditable configúralo como verdadero y bind:

    <igx-tree-grid #treeGrid [batchEditing]="true" [data]="data" primaryKey="employeeID" foreignKey="PID"
    width ="100%" height ="500px" rowEditable=true>
    ...
</igx-tree-grid>
...
    <button igxButton (click)="addRow()">Add Root Level Row</button>
    <button igxButton [disabled]="!treeGrid.transactions.canUndo" (click)="undo()">Undo</button>
    <button igxButton [disabled]="!treeGrid.transactions.canRedo" (click)="redo()">Redo</button>
    <button igxButton [disabled]="treeGrid.transactions.getAggregatedChanges(false).length < 1"
        (click)="openCommitDialog()">Commit</button>
...

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

    export class TreeGridBatchEditingSampleComponent {
    @ViewChild('treeGrid', { read: IgxTreeGridComponent }) public treeGrid: IgxTreeGridComponent;

    public undo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.undo();
    }

    public redo() {
        /* exit edit mode and commit changes */
        this.treeGrid.endEdit(true);
        this.treeGrid.transactions.redo();
    }

    public commit() {
        this.treeGrid.transactions.commit(this.data);
        this.dialog.close();
    }
}
    Note

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

    Eliminar un nodo padre tieneTree Grid algunas particularidades. Si usas datos jerárquicos, los hijos se eliminarán al eliminar a su progenitor. Si usas datos planos, puedes establecer el comportamiento deseado usando lacascadeOnDelete propiedad deTree Grid. Esta propiedad indica si los registros hijos deben eliminarse cuando su padre se elimina (por defecto, está configurado comotrue).

    Note

    DesactivarrowEditable la propiedad modificaráTree 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.