Edição de grade de React

    The Ignite UI for React Cell Editing feature in React Grid provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The IgrGrid provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:

    Setup

    In order to specify which edit mode should be enabled, the IgrGrid exposes the following boolean properties - editable and rowEditable.

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

    • false- a edição para a coluna correspondente será desabilitada. Este é o valor padrão.
    • verdadeiro- a edição da coluna correspondente será habilitada.

    Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the IgrGrid.

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

    • false- a edição de linha na grade correspondente será desabilitada. Este é o valor padrão.
    • verdadeiro- a edição de linhas na grade correspondente será habilitada.

    In the IgrGrid, if you set rowEditable property to true, and the editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.

    • Edição de células e lotes- neste cenário, cada modificação 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 um modelo de edição específico para um tipo de dado, você deve especificar a propriedade dataType da coluna. Então, vamos ver agora quais são os modelos padrão para cada tipo:

    • For string data type, default template is using IgrInput.
    • For number data type, default template is using IgrInput 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 IgrDatePicker
    • Para o tipo de dados dateTime, o modelo padrão é usar DateTimeEditor. Este editor lhe dará instruções de máscara para a parte dos elementos de entrada do objeto DateTime.
    • Para o tipo de dado time, o modelo padrão usa TimePicker.
    • For boolean data type, default template is using IgrCheckbox.
    • Para o tipo de dados currency, o modelo padrão usa InputGroup com configuração de prefixo/sufixo com base nas configurações de localidade do aplicativo ou da grade.
    • Para o tipo de dados percent, o modelo padrão usa InputGroup com elemento de sufixo que mostra uma prévia do valor editado em porcentagens.

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

    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 SeRowEditing estiver ativado, será acionado quando uma linha entrar no modo de edição IgrGridEditEventArgs verdadeiro
    CellEditEnter Acionado quando uma célula entra no modo de edição (depoisRowEditEnter) IgrGridEditEventArgs verdadeiro
    CellEdit Se o valor for alterado, será acionado imediatamente antes de o valor de uma célula ser confirmado (por exemplo, pressionandoEnter) IgrGridEditEventArgs verdadeiro
    CellEditDone Se o valor for alterado, será acionado depois que uma célula tiver sido editada e o valor da célula for confirmado IgrGridEditDoneEventArgs falso
    CellEditExit Acionado quando uma célula sai do modo de edição IgrGridEditDoneEventArgs falso
    RowEdit SeRowEditing estiver ativado, é acionado logo antes de uma linha no valor do modo de edição ser confirmado (por exemplo, clicando noDone botão na sobreposição de edição de linha) IgrGridEditEventArgs verdadeiro
    RowEditDone SeRowEditing estiver ativado, será acionado depois que uma linha tiver sido editada e o valor da nova linha tiver sido confirmado. IgrGridEditDoneEventArgs falso
    RowEditExit SeRowEditing estiver ativado, será acionado quando uma linha sair do modo de edição IgrGridEditDoneEventArgs falso

    Event Cancelation

    • RowEditEnter- Nem Row nem Cell 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 Cell e/ou Row permitida, pressionar o botão Done ou Enter não confirmará o valor ou a transação de linha. A edição de célula e a edição de linha não serão fechadas até que o botão Cancel 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:

    function onSorting(grid: IgrGrid, event: IgrSortingEventArgs) {
    grid.endEdit(true);
}

<IgrGrid data={localData} primaryKey="ProductID" sorting={onSorting}>
</IgrGrid>

    API References

    Additional Resources