Angular Tree Grid Editing

Ignite UI for Angular componente Grade de árvore fornece uma maneira fácil de executar operações de manipulação de dados, como criar, atualizar e excluir registros. As fases de manipulação de dados são: Edição de células, Edição de linhas e Edição em lote. A Grade de Árvore oferece uma API pública poderosa que permite personalizar a maneira como essas operações são executadas. Além disso, a edição de células expõe vários editores padrão com base no tipo de dados da coluna, que podem ser facilmente personalizados por meio da diretiva igxCellEditor ou das diretivas igxRow.

Setup

Para especificar qual modo de edição deve ser ativado, a Grade de Árvore expõe as seguintes propriedades booleanas -editableandrowEditable.

A propriedade editável permite que você especifique as seguintes opções:

false- a edição da coluna correspondente será desativada; /valor padrão/
true- a edição da coluna correspondente será habilitada;

Lembre-se de que, se a coluna não for editável, você ainda poderá modificar seu valor por meio da API pública exposta pela Grade de Árvore.

A propriedade rowEditable permite que você especifique as seguintes opções:

false- a edição de linha na grade correspondente será desabilitada; /valor padrão/
true- a edição de linha na grade correspondente será habilitada;

Na Grade de Árvore, se você definir a propriedade rowEditable como true e a propriedade editable não estiver explicitamente definida para nenhuma coluna, a edição será habilitada para todas as colunas, exceto a chave primária.

A edição em lote na grade pode ser ativada para os modos de edição de células e edição de linha. Para configurar a edição em lote, é necessário fornecer à grade um TransactionService.

Edição de células e lotes- neste cenário, cada modificação individual de cada célula é preservada separadamente e as operações de desfazer/refazer estão disponíveis no nível da célula;
Edição de linha e lote- neste cenário, as modificações são preservadas no nível da linha, portanto, as operações de desfazer/refazer não funcionarão para cada célula modificada, mas para o grupo de células de cada linha.

Editing Templates

Se você quiser usar modelos de edição específicos para tipo de dado, deve especificar a propriedade da colunadataType. Então, vamos agora ver quais são os modelos padrão para cada tipo:

Parastring o tipo de dado, o template padrão usa igxInput
Para o tipo denumber dado, o template padrão usa igxInput type="number", então se você tentar atualizar a célula para um valor que não pode ser analisado para um número, sua alteração será descartada, e o valor na célula será definido para 0.
Paradate o tipo de dado, o template padrão é usar igxDatePicker
Para odateTime tipo de dado, o template padrão usa a diretiva IgxDateTimeEditor. Este editor vai te dar instruções de máscara para a parte dos elementos de entrada do objeto DateTime.
Para o tipo dedate dado, o template padrão usa o componente IgxDatePicker.
Paratime o tipo de dado, o template padrão usa o componente IgxTimePicker.
Para oboolean tipo de dado, o template padrão é usar igxCheckbox
Para o tipo decurrency dado, o template padrão é usar o IgxInputGroup com configuração de prefixo/sufixo baseada nas configurações de aplicação ou de grade.
Para opercent tipo de dado, o template padrão é usar o IgxInputGroup com o elemento sufixo que mostra uma prévia do valor editado em percentagens.
Para modelos personalizados, você pode ver o tópico Edição de células

Todos os tipos de dados de coluna disponíveis podem ser encontrados no tópico oficial Tipos de coluna.

Editores de modelo padrão de colunas de data e hora

Os editores de templates edatedateTimetime os tipos de dados de coluna usam um formato de entrada padrão conforme oIgxGridlocale do 's.

Caso apipeArgs propriedade objetoformat esteja definida na coluna, o formato de entrada dos editores será inferido a partir dela. A condição é que ele possa ser analisado como contendo apenas partes numéricas de data-hora.

Se o formato de entrada do editor estiver explicitamente definido, oeditorOptions objeto do tipoIColumnEditorOptions pode ser alavancado. Ele aceita umadateTimeFormat propriedade que é usada como formato de entrada para os editores edatedateTimetime os tipos de dados de coluna.

const editorOptions: IColumnEditorOptions = {
    dateTimeFormat: 'MM/dd/YYYY',
}

<igx-column field="sampleDate" dataType="date" [editorOptions]="editorOptions"></igx-column>

Event arguments and sequence

A grade expõe uma ampla variedade de eventos que fornecem maior controle sobre a experiência de edição. Esses eventos são disparados durante o ciclo de vida de edição de linha e edição de célula- ao iniciar, confirmar ou cancelar a ação de edição.

Acontecimento	Descrição	Argumentos	Cancelável
`rowEditEnter`	Se`rowEditing` estiver ativado, será acionado quando uma linha entrar no modo de edição	IGridEditEventArgs	`true`
`cellEditEnter`	Acionado quando uma célula entra no modo de edição (depois`rowEditEnter`)	IGridEditEventArgs	`true`
`cellEdit`	Se o valor for alterado, será acionado imediatamente antes de o valor de uma célula ser confirmado (por exemplo, pressionando`Enter`)	IGridEditEventArgs	`true`
`cellEditDone`	Se o valor for alterado, será acionado depois que uma célula tiver sido editada e o valor da célula for confirmado	IGridEditDoneEventArgs	`false`
`cellEditExit`	Acionado quando uma célula sai do modo de edição	IGridEditDoneEventArgs	`false`
`rowEdit`	Se`rowEditing` estiver ativado, é acionado logo antes de uma linha no valor do modo de edição ser confirmado (por exemplo, clicando no`Done` botão na sobreposição de edição de linha)	IGridEditEventArgs	`true`
`rowEditDone`	Se`rowEditing` estiver ativado, será acionado depois que uma linha tiver sido editada e o valor da nova linha tiver sido confirmado.	IGridEditDoneEventArgs	`false`
`rowEditExit`	Se`rowEditing` estiver ativado, será acionado quando uma linha sair do modo de edição	IGridEditDoneEventArgs	`false`

Event cancellation

RowEditEnter- Nem Row nem Cell entram no modo de edição.
CellEditEnter- Impede a entrada na edição da célula. SerowEditable estiver ativada, a edição de linha será acionada, embora a edição por célula continue proibida.
CellEdit- Permitir a edição de célula/linha, ao apertar o botão Concluído ou Enter não compromete o valor ou a transação de linha. A edição de células e a edição de linha não serão fechadas até o botão Cancelar ser clicado.
RowEdit- A célula de comprometimento é possível, mas não a fileira inteira. A linha permanecerá no modo de edição e a transação da linha será considerada aberta. Apertar Concluído não compromete nem fecha a linha. O botão Cancelar fecha o processo de edição e a transação sem comprometer as alterações.

O exemplo a seguir demonstra a sequência de execução de edição em ação:

Features integration

Enquanto uma célula/linha está no modo de edição, um usuário pode interagir com a grade de várias maneiras. A tabela a seguir especifica como uma determinada interação afeta a edição atual:

Grade de árvore	Filtragem	Classificação	Paginação	Movente	Fixação	Escondendo	AgruparPor	Redimensionamento	Escapar	Entrar	F2	Guia	Clique na célula	Adicionar nova linha/Excluir/Editar
Manter o modo de edição								✔
Sair do modo de edição	✔	✔	✔	✔	✔	✔	✔		✔	✔	✔	✔	✔	✔
Cometer										✔	✔	✔	✔	✔
Descartar	✔	✔	✔	✔	✔	✔	✔		✔

Como visto na tabela, todas as interações, exceto o redimensionamento de uma coluna, encerrarão a edição e descartarão os novos valores. Caso o novo valor seja confirmado, isso pode ser feito pelo desenvolvedor no evento "-ing" do recurso correspondente.

Exemplo de como confirmar novos valores, se o usuário tentar classificar a coluna enquanto uma célula/linha estiver no modo de edição:

<igx-grid #grid [data]="localData" [primaryKey]="'ProductID'" (sorting)="onSorting($event)">
...
</igx-grid>

public onSorting(event: ISortingEventArgs) {
    this.grid.endEdit(true);
    // (event.owner as IgxGridComponent).endEdit(true);
}

API References

Additional Resources

Procurando