Edição de grade de React

    O recurso Ignite UI for React Edição de Células no React Grid fornece uma maneira fácil de executar operações de manipulação de dados, como criar, atualizar e excluir registros. O IgrGrid fornece uma API pública poderosa que permite personalizar a maneira como essas operações são executadas. As fases de manipulação de dados são:

    Setup

    Para especificar qual modo de edição deve ser ativado, o IgrGrid expõe as seguintes propriedades booleanas -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.

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

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

    • 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.
    • Para number o tipo de dados, o modelo padrão é usar IgrInput 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.
    • 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