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

    O recurso de Edição em Lote do IgxTreeGrid é baseado noHierarchicalTransactionService. Siga oTransaction Service class hierarchy tópico para ver uma visão geral eigxHierarchicalTransactionService 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 em que o treeGrid estábatchEditing ativado e tem a edição de linhas ativada. O último garantirá que a transação seja adicionada após a confirmação de toda a edição da linha.

    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 oIgxTreeGridModule arquivo no 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 é ativarbatchEditing a partir da sua Tree Grid:

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

    Isso garantirá que uma instância adequada deTransaction serviço seja fornecida para a grade igx-tree. O direitoTransactionService é fornecido por meio de umTransactionFactory. Você pode aprender mais sobre essa implementação interna no tópico de transações.

    Após a edição em lote ser ativada, defina umaIgxTreeGrid com fonte de dados vinculada erowEditable defina como true e 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>
...

    O código a seguir demonstra o uso daHierarchicalTransactionService API - desfazer, refazer, commitir.

    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 vai lidar com o fim da edição e você teria que fazer isso sozinho. Caso contrário,Tree Grid ficaria no modo de edição. Uma forma de fazer isso é chamandoendEdit o método respectivo.

    Deletar um nó pai emTree Grid tem algumas peculiaridades. Se você estiver usando dados hierárquicos, os filhos serão excluídos ao excluir o pai deles. Se você estiver usando um dado plano, pode definir o comportamento desejado usando acascadeOnDelete propriedade deTree Grid. Essa propriedade indica se os registros filhos devem ser excluídos quando o pai deles é excluído (por padrão, ela é definida paratrue).

    Note

    DesabilitarrowEditable a propriedade vai modificarTree Grid para criar transações ao mudar a célula e não expor a sobreposição de edição de linha na interface.

    API References

    Additional Resources

    Nossa comunidade é ativa e sempre acolhedora para novas ideias.