Edição de grade de Web Components

    O recurso Ignite UI for Web Components Cell Editing no Web Components Grid fornece uma maneira fácil de executar operações de manipulação de dados, como criar, atualizar e excluir registros. O IgcGridComponent 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 habilitado, o IgcGridComponent expõe as seguintes propriedades booleanas -editable e 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.

    Tenha em mente que se a coluna não for editável, você ainda poderá modificar seu valor por meio da API pública exposta pelo IgcGridComponent.

    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.

    No IgcGridComponent, 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.

    • 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 IgcInputComponent.
    • Para o tipo de dados number, o modelo padrão usa IgcInputComponent type="number", então 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 usa IgcDatePickerComponent
    • 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 IgcCheckboxComponent.
    • 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 IgcGridEditEventArgs verdadeiro
    CellEditEnter Acionado quando uma célula entra no modo de edição (depoisRowEditEnter) IgcGridEditEventArgs verdadeiro
    CellEdit Se o valor for alterado, será acionado imediatamente antes de o valor de uma célula ser confirmado (por exemplo, pressionandoEnter) IgcGridEditEventArgs 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 IgcGridEditDoneEventArgs falso
    CellEditExit Acionado quando uma célula sai do modo de edição IgcGridEditDoneEventArgs 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) IgcGridEditEventArgs verdadeiro
    RowEditDone SeRowEditing estiver ativado, será acionado depois que uma linha tiver sido editada e o valor da nova linha tiver sido confirmado. IgcGridEditDoneEventArgs falso
    RowEditExit SeRowEditing estiver ativado, será acionado quando uma linha sair do modo de edição IgcGridEditDoneEventArgs 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:

    <igc-grid id="grid" primary-key="ProductID" >
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGridComponent;
    grid.data = this.data;
    grid.addEventListener("sorting", this.onSorting);
}

public onSorting(event: IgcSortingEventArgs) {
    var grid = document.getElementById('grid') as IgcGridComponent;
    grid.endEdit(true);
}

    API References

    Additional Resources