Angular Tree Grid Row Editing

A Grade de Árvore fornece uma maneira conveniente de realizar manipulações de dados por meio de edição em linha e uma API poderosa para operações CRUD Angular. Clique em uma linha e pressione a tecla Enter ou simplesmente clique duas vezes com o mouse na linha que precisa ser modificada.

Angular Tree Grid Row Editing Example

O exemplo a seguir demonstra como habilitar a edição de linha na Grade de Árvore. Alterar um valor de célula e, em seguida, clicar ou navegar para outra célula na mesma linha não atualizará o valor da linha até que seja confirmado usando o botão Concluído ou descartado usando o botão Cancelar.

Note

Quando uma linha está no modo de edição, clicar em uma célula em outra linha agirá como se o botão Concluído estivesse pressionado - envie todas as alterações da linha anterior. Se a nova célula que recebe o foco for editável, a nova linha também entrará no modo de edição, enquanto se a célula não for editável, apenas a linha anterior sairá do modo de edição.

Row Editing 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 {}

Em seguida, defina uma Grade de Árvore com fonte de dados vinculada e rowEditable defina como true:

<igx-tree-grid [data]="data" [primaryKey]="EmployeID" [foreignKey]="PID"
               [rowEditable]="true" [rowSelection]="'multiple'" [moving]="true">
    <igx-column *ngFor="let c of columns"
        [editable] ="c.editable"
        [field]="c.field"
        [dataType]="c.dataType"
        [header]="c.label"
        [resizable]="c.resizable"
        [sortable]="c.sortable"
        [filterable]="c.filterable">
    </igx-column>
</igx-tree-grid>

Note

A configuração da chave primária é obrigatória para operações de edição de linha.

Note

Não é necessário habilitar a edição de colunas individuais. Usando o rowEditable na Grade de Árvore, significará que todas as linhas, com field propriedade, excluindo a principal, será editável. Se você quiser desabilitar a edição de uma coluna específica, defina o editable para false.

import { Component, OnInit, ViewChild } from '@angular/core';
import { IgxTreeGridComponent } from 'igniteui-angular';
// import { IgxTreeGridComponent } from '@infragistics/igniteui-angular'; for licensed package
import { FLAT_DATA } from './data';

@Component({
   providers: [],
    selector: 'app-tree-grid-row-editing-sample',
    styleUrls: ['tree-grid-row-editing-sample.component.scss'],
    templateUrl: 'tree-grid-row-editing-sample.component.html'
})
export class TreeGridRowEditSampleComponent implements OnInit {

    public data: any[];
    public columns: any[];

    @ViewChild('treeGrid') public treeGrid: IgxTreeGridComponent;
    public ngOnInit(): void {
        this.data = FLAT_DATA;

        this.columns = [
            { field: 'FirstName', label: 'First Name', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'LastName', label: 'Last Name', resizable: false, sortable: false, filterable: false, editable: true, dataType: 'string' },
            { field: 'Title', label: 'Title', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'string' },
            { field: 'HireDate', label: 'Hire Date', resizable: true, sortable: true, filterable: true, editable: true, dataType: 'date' }
        ];
    }
}

Note

A Grade de Árvore usa internamente um provedor IgxBaseTransactionService que mantém as alterações de célula pendentes, até que o estado da linha seja enviado ou cancelado.

Positioning

A posição padrão da sobreposição será abaixo da linha que está no modo de edição
Se não houver espaço abaixo da linha, a sobreposição aparecerá acima da linha.
Uma vez mostrado - superior ou inferior, a sobreposição manterá essa posição durante a rolagem, até que a sobreposição seja fechada.

Behavior

Se a linha estiver no modo de edição, a edição continuará, se uma célula da mesma linha for clicada.
Clicar no botão "Concluído" concluirá a edição da linha e enviará alterações para a fonte de dados ou para uma transação, se disponível. Além disso, a linha sairá do modo de edição.
Clicar no botão "Cancelar" reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.
Se a linha estiver no modo de edição, clicar em uma célula de outra linha concluirá a edição da linha atual e enviará novas alterações de linha (o mesmo comportamento clicando no botão "Concluído"). Se a nova célula que recebe o foco for editável, a nova linha também entrará no modo de edição, enquanto se a célula não for editável, apenas a linha anterior sairá do modo de edição.
Se a linha estiver no modo de edição e a Grade de árvore for rolada para que a linha saia da área visível, esta última ainda estará no modo de edição. Quando a Grade de árvore é rolada, para que a linha fique visível novamente, a linha ainda estará no modo de edição. Quando clicado fora da grade da árvore, a célula também permanecerá no modo de edição.
Ao realizar operações de classificação, filtragem, pesquisa e ocultação, reverterá todas as alterações atuais na linha e a linha sairá do modo de edição.
Ao executar operações de paginação, redimensionamento, fixação e movimentação, sairá do modo de edição e enviará o valor mais recente.
Cada célula modificada recebe o estilo editado até que a edição da linha seja concluída. Esse é o comportamento quando a Grade de Árvore não é fornecida com transações. Quando as transações estão disponíveis - o estilo de edição da célula é aplicado até que todas as alterações sejam confirmadas.

Enter e F2 entra no modo de edição de linha
Esc sai do modo de edição de linha e não envia nenhuma das alterações de célula, feitas enquanto a linha estava no modo de edição.
Tab mova o foco de uma célula editável na linha para a próxima e da célula editável mais à direita para os botões CANCELAR e CONCLUÍDO. A navegação do botão CONCLUÍDO vai para a célula editável mais à esquerda dentro da linha editada no momento.

Feature Integration

Qualquer operação de alteração de dados encerrará as operações de edição de linha e enviará as alterações de linha atuais. Isso incluirá operações como classificação, alteração de critérios de agrupamento e filtragem, paginação, etc.
Os resumos serão atualizados após a conclusão da edição da linha. O mesmo é válido para os outros recursos, como classificação, filtragem, etc.

Customizing Row Editing Overlay

Customizing Text

Personalizar o texto da sobreposição de edição de linha é possível usando o igxRowEditTextDirective. A rowChangesCount propriedade é exposta e contém a contagem das células alteradas.

<ng-template igxRowEditText let-rowChangesCount>
	Changes: {{rowChangesCount}}
</ng-template>

Customizing Buttons

Personalizar os botões da sobreposição de edição de linha é possível usando o igxRowEditActionsDirective. Se você quiser que os botões façam parte da navegação do teclado, cada um deles deve ter o igxRowEditTabStopDirective.

<ng-template igxRowEditActions let-endRowEdit>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
	<button igxButton igxRowEditTabStop (click)="endRowEdit(true)">Apply</button>
</ng-template>

Estilização

Usando a Ignite UI for Angular Biblioteca de temas, podemos alterar bastante a sobreposição de edição de linha. A sobreposição de edição de linha é um elemento composto - sua interface do usuário é composta por alguns outros componentes: -igx-banner para renderizar seu conteúdo, -igx-button s são renderizados no modelo padrão (para os Done botões e Cancel).

No exemplo abaixo, usaremos as opções de estilo desses dois componentes, button styling & banner-styling, para personalizar a experiência de edição de linha do nosso IgxTreeGrid. Também estilizaremos o editor e o plano de fundo da célula atual para torná-la mais distinta. Você pode aprender mais sobre o estilo de célula aqui.

Import theme

A maneira mais fácil de estilizar o banner de edição de linha é definir estilos no arquivo de estilo global do nosso app (normalmente styles.scss). A primeira coisa que precisamos fazer é importar o themes/index arquivo - isso nos dá acesso a todas as ferramentas poderosas do framework Sass Ignite UI for Angular:

@use "igniteui-angular/theming" as *;

// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';

Depois de importar o arquivo de temas, podemos criar temas personalizados.

Defina o tema

Agora podemos definir um personalizado banner theme que afetará nosso plano de fundo de edição de linha e fazer uso de uma das paletas predefinidas, a saber $purple-palette:

$banner-theme: banner-theme(
  $banner-background: #e3e3e3,
  $banner-message-color: color($purple-palette, "secondary", 600)
);

Aqui estamos usando my-banner-palette em conjunto com igx-color (exposto pela biblioteca de temas) para gerar nossas cores.

Include the theme

Tudo o que temos a fazer agora é aplicar o tema com uma instrução Sass @include. Passamos nosso recém-definido $banner-theme através do css-vars mixin:

@include css-vars($banner-theme);

Component styles

Como a sobreposição de edição de linha faz uso de muitos temas de outros componentes, estilizá-la por meio dos estilos globais pode afetar outras partes do nosso aplicativo (por exemplo, banners, botões, etc.). A melhor maneira de evitar isso é definir o escopo do tema do banner para o arquivo de estilo do componente específico ao qual ele é aplicado.

Note

Se o componente estiver usando um Emulated ViewEncapsulation, será necessário penetrar nesse encapsulamento usando::ng-deep para estilizar a sobreposição de edição de linha da grade.

// custom.component.scss

:host {
  ::ng-deep {
    @include css-vars($banner-theme);
  }
}

Com a sintaxe acima, nosso tema de banner personalizado se aplica corretamente à sobreposição de edição de linha da grade.

Custom Templates

Para personalizar ainda mais nossa sobreposição de edição de linha, podemos passar um modelo personalizado para que possamos estilizar os Done botões e Cancel separadamente:

<!-- in component.html -->
<igx-tree-grid>
    <ng-template igxRowEditActions let-endRowEdit>
        <div class="custom-buttons">
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(false)">
                <igx-icon>clear</igx-icon>
            </button>
            <button igxIconButton="flat" class="custom-button" igxRowEditTabStop (click)="endRowEdit(true)">
                <igx-icon>check</igx-icon>
            </button>
        </div>
    </ng-template>
</igx-tree-grid>

Depois de definirmos nossos botões personalizados, podemos usar o button-theme para estilizá-los. Você pode aprender mais sobre igx-button estilo aqui. Podemos criar um tema personalizado para o nosso Done e Cancel:

// custom.component.scss
...

$button-theme: button-theme(
  $palette: $purple-palette
);

...
.custom-buttons {
  @include css-vars($button-theme);
}

Definimos o escopo de nossa @include declaração para.custom-buttons que ela seja aplicada apenas aos Done botões e Cancel.

Demo

Depois de estilizar o banner e os botões, também definimos um estilo personalizado para a célula no modo de edição. O resultado de todos os estilos combinados pode ser visto abaixo:

Note

A amostra não será afetada Change Theme pelo tema global selecionado.

Known Issues and Limitations

Quando a grade não tiver nenhuma primaryKey configuração e os cenários de dados remotos estiverem habilitados (ao paginar, classificar, filtrar, rolar solicitações de gatilho para um servidor remoto para recuperar os dados a serem exibidos na grade), uma linha perderá o seguinte estado após a conclusão de uma solicitação de dados:
- Seleção de linha
- Expandir/recolher linha
- Edição de linha
- Fixação de linha

API References

Additional Resources

Nossa comunidade é ativa e sempre acolhedora para novas ideias.

Angular Tree Grid Row Editing