Edição em lote e transações do Angular Tree Grid

    O recurso Batch Editing do IgxTreeGrid é baseado no HierarchicalTransactionService. Siga o tópico Transaction Service class hierarchy para ver uma visão geral do igxHierarchicalTransactionService e detalhes sobre como ele é implementado.

    Abaixo está um exemplo detalhado de como a Edição em Lote é habilitada para o componente Grade em Árvore.

    Angular Tree Grid Batch Editing and Transactions Example

    O exemplo a seguir demonstra um cenário, onde o treeGrid tem batchEditing habilitado e tem edição de linha habilitada. O último garantirá que a transação será adicionada após a edição de linha inteira ser confirmada.

    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 o IgxTreeGridModule no arquivo app.module.ts:

    // app.module.ts

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

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

    Então, tudo o que você precisa fazer é habilitar batchEditing na sua grade de árvore:

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

    Isso garantirá que uma instância adequada do serviço Transaction seja fornecida para o igx-tree-grid. O TransactionService adequado é fornecido por meio de um TransactionFactory. Você pode aprender mais sobre essa implementação interna no tópico de transações.

    Após a edição em lote ser habilitada, defina um IgxTreeGrid com a fonte de dados vinculada e rowEditable definido como verdadeiro e 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>
...

    O código a seguir demonstra o uso da API HierarchicalTransactionService- desfazer, refazer, 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

    A API de transações não manipulará o fim da edição e você precisaria fazer isso sozinho. Caso contrário, Tree Grid permaneceria no modo de edição. Uma maneira de fazer isso é chamando endEdit no respectivo método.

    Excluir um nó pai no Tree Grid tem algumas peculiaridades. Se você estiver usando dados hierárquicos, os filhos serão excluídos ao excluir seus pais. Se você estiver usando dados simples, você pode definir o comportamento desejado usando a propriedade cascadeOnDelete do Tree Grid. Esta propriedade indica se os registros filhos devem ser excluídos quando seus pais forem excluídos (por padrão, é definido como true).

    Note

    Desabilitar a propriedade rowEditable modificará Tree Grid para criar transações na alteração de célula e não exporá a sobreposição de edição de linha na interface do usuário.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.