Edición por lotes y transacciones de cuadrícula de árbol Angular

    La función de edición por lotes de IgxTreeGrid se basa en HierarchicalTransactionService. Siga el tema Transaction Service class hierarchy para ver una descripción general de igxHierarchicalTransactionService y detalles sobre 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 treeGrid 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.

    Note

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

    Usage

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

    // app.module.ts

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

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

    Luego, todo lo que necesitas hacer es habilitar batchEditing desde tu Tree Grid:

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

    Esto garantizará que se proporcione una instancia adecuada del servicio Transaction para igx-tree-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 IgxTreeGrid con una fuente de datos vinculada y rowEditable configurado en verdadero y vincule:

    <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 la API HierarchicalTransactionService: deshacer, rehacer y confirmar.

    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 se encargará del final de la edición y deberá hacerlo usted mismo. De lo contrario, Tree Grid permanecería en modo de edición. Una forma de hacerlo es llamando endEdit en el método respectivo.

    Eliminar un nodo principal en Tree Grid tiene algunas peculiaridades. Si está utilizando datos jerárquicos, los hijos se eliminarán al eliminar a sus padres. Si está utilizando datos planos, puede establecer el comportamiento deseado utilizando la propiedad cascadeOnDelete de Tree Grid. Esta propiedad indica si los registros secundarios deben eliminarse cuando se eliminan los principales (de forma predeterminada, está establecido en true).

    Note

    Al deshabilitar la propiedad rowEditable se modificará Tree 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.

    API References

    Additional Resources

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