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

In order to specify which edit mode should be enabled, the Grid exposes the following boolean properties - 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

If you want to use a data type specific edit templates, you should specify the column dataType property. So let's now see what are the default templates for each type:

For string data type, default template is using igxInput
For number data type, default template is using igxInput type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.
For date data type, default template is using igxDatePicker
For dateTime data type, default template is using IgxDateTimeEditor directive. This editor will give you a mask directions for the input elements part of the DateTime object.
For date data type, default template is using IgxDatePicker component.
For time - data type, default template is using IgxTimePicker component.
For boolean data type, default template is using igxCheckbox
For currency data type, default template is using IgxInputGroup with prefix/suffix configuration based on application or grid locale settings.
For percent data type, default template is using IgxInputGroup with suffix element that shows a preview of the edited value in percents.
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

The template editors of date, dateTime and time column data types use a default input format as per the IgxGrid's locale.

In case the pipeArgs object format property is set on the column, the input format of the editors will be inferred from it. The condition is that it can be parsed as containing numeric date-time parts only.

If the editors input format should be explicitly set, the editorOptions object of type IColumnEditorOptions can be leveraged. It accepts a dateTimeFormat property that is used as input format for the editors of date, dateTime and time column data types.

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 - Neither Row nor Cell will enter edit mode.
CellEditEnter - Prevents entering cell edit. If rowEditable is enabled, row edit will be triggered, although cell edit will remain forbidden.
CellEdit - Allowed Cell/Row edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.
RowEdit - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.

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);
}

API References

Additional Resources

Procurando