Blazor Tree Grid Editing

    O recurso Ignite UI for Blazor Edição de Células em Blazor Grade de Árvore fornece uma maneira fácil de executar operações de manipulação de dados, como criar, atualizar e excluir registros. O IgbTreeGrid 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 IgbTreeGrid 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 IgbTreeGrid.

    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.

    ​IgbTreeGrid 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:

    • Para o tipo de dados string, o modelo padrão usa IgbInput.
    • Para o tipo de dados number, o modelo padrão usa o tipo IgbInput ="número", portanto, se você tentar atualizar a célula para um valor que não pode ser analisado como um número, sua alteração será descartada e o valor na célula será definido como 0.
    • Para o tipo de dados de date, o modelo padrão é usar IgbDatePicker
    • 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.
    • Para o tipo de dados boolean, o modelo padrão usa IgbCheckbox.
    • 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 IgbGridEditEventArgs verdadeiro
    CellEditEnter Acionado quando uma célula entra no modo de edição (depoisRowEditEnter) IgbGridEditEventArgs verdadeiro
    CellEdit Se o valor for alterado, será acionado imediatamente antes de o valor de uma célula ser confirmado (por exemplo, pressionandoEnter) IgbGridEditEventArgs 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 IgbGridEditDoneEventArgs falso
    CellEditExit Acionado quando uma célula sai do modo de edição IgbGridEditDoneEventArgs 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) IgbGridEditEventArgs verdadeiro
    RowEditDone SeRowEditing estiver ativado, será acionado depois que uma linha tiver sido editada e o valor da nova linha tiver sido confirmado. IgbGridEditDoneEventArgs falso
    RowEditExit SeRowEditing estiver ativado, será acionado quando uma linha sair do modo de edição IgbGridEditDoneEventArgs falso

    Event Cancelation

    • RowEditEnter- Nem Row nem Cell entrarão no modo de edição.
    • CellEditEnter- Impede a entrada de edição de célula. Se RowEditable estiver habilitado, 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 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:

    <IgbTreeGrid
    Id="grid"
    SortingScript="SortingHandler"
    RowEditable="true">
</IgbTreeGrid>

//In JavaScript
function SortingHandler() {
    grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);

    API References

    Additional Resources