Angular Edição de grade

Ignite UI for Angular componente Grid 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. O Grid 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 habilitado, o Grid expõe as seguintes propriedades booleanas -editable and rowEditable.

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 pelo Grid.

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, 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 de um tipo de dados, especifique a propriedade column dataType. Então, vamos agora ver quais são os modelos padrão para cada tipo:

Para string o tipo de dados, o modelo padrão está usando igxInput
Para number o tipo de dados, o modelo padrão é usar igxInput type="number", portanto, 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 como 0.
Para date o tipo de dados, o modelo padrão está usando igxDatePicker
Para dateTime o tipo de dados, o modelo padrão está usando a diretiva IgxDateTimeEditor. Este editor fornecerá instruções de máscara para a parte dos elementos de entrada do objeto DateTime.
Para date o tipo de dados, o modelo padrão está usando o componente IgxDatePicker.
Para time o tipo de dados, o modelo padrão está usando o componente IgxTimePicker.
Para boolean o tipo de dados, o modelo padrão está usando igxCheckbox
Para currency o tipo de dados, o modelo padrão está usando IgxInputGroup com configuração de prefixo/sufixo com base nas configurações de localidade do aplicativo ou da grade.
Para percent o tipo de dados, o modelo padrão está usando IgxInputGroup com elemento de sufixo que mostra uma visualização do valor editado em porcentagens.
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 modelo e date dateTime time os tipos de dados de coluna usam um formato de entrada padrão de acordo com o IgxGrid do locale.

Caso a propriedade do pipeArgs objeto format seja 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 e hora.

Se o formato de entrada dos editores deve ser definido explicitamente, o editorOptions objeto do tipo IColumnEditorOptions pode ser aproveitado. Ele aceita uma dateTimeFormat propriedade que é usada como formato de entrada para os editores de tipos de dados de date coluna dateTime e time.

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 cancelation

RowEditEnter- Nem Linha nem Célula entrarão no modo de edição.
CellEditEnter- Impede a entrada na edição da célula. Se rowEditable estiver ativado, a edição de linha será acionada, embora a edição de célula permaneça proibida.
CellEdit- Edição de célula/linha permitida, pressionar o botão Concluído ou Enter não confirmará o valor ou a transação de linha. A edição de células e a edição de linhas não serão fechadas até que o botão Cancelar seja clicado.
RowEdit- É possível confirmar a célula, mas não a linha inteira. A linha permanecerá no modo de edição e a transação de linha será considerada aberta. Pressionar Concluído não confirma ou fecha a linha. O botão Cancelar fecha o processo de edição e a transação sem confirmar 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	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);
}