Edição de grade de Web Components

    O recurso Ignite UI for Web Components Cell Editing no Web Components Grid oferece uma maneira fácil de realizar operações de manipulação de dados, como criar, atualizar e excluir registros. EleIgcGridComponent oferece uma API pública poderosa que permite personalizar a forma como essas operações são realizadas. As fases de manipulação de dados são:

    Setup

    Para especificar qual modo de edição deve ser ativado, oIgcGridComponent modo expõe as seguintes propriedades booleanas -editableandrowEditable.

    Aeditable propriedade 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 pode modificar seu valor através da API pública exposta peloIgcGridComponent.

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

    NoIgcGridComponent caso de que você definirrowEditable a propriedade como true e aeditable propriedade não estiver explicitamente definida para nenhuma coluna, a edição será ativada para todas as colunas, exceto para 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 modelos de edição específicos do tipo de dado, deve especificar a propriedade dadataType coluna. Então, vamos agora ver quais são os modelos padrão para cada tipo:

    • Para ostring tipo de dado, o template padrão é o usoIgcInputComponent.
    • Paranumber o tipo de dado, o template padrão usaIgcInputComponent type="number", então 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.
    • Para odate tipo de dado, o template padrão é usarIgcDatePickerComponent
    • Para odateTime tipo de dado, o template padrão é o usoDateTimeEditor. Este editor vai te dar instruções de máscara para a parte dos elementos de entrada do objeto DateTime.
    • Tipo de dado,time o template padrão está usandoTimePicker.
    • Para oboolean tipo de dado, o template padrão é o usoIgcCheckboxComponent.
    • Para ocurrency tipo de dado, o template padrão é o usoInputGroup com configuração de prefixo/sufixo baseada nas configurações de aplicação ou de grade.
    • Para opercent tipo de dado, o template padrão é o usoInputGroup do elemento com sufixo que mostra uma prévia do valor editado em percentagens.

    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, pressionando ENTER) IgcGridEditEventArgs **verdadeiro*-
    CellEditDone Se o valor for alterado, é acionado após uma célula ser editada e o valor da célula for **comprometido*- IgcGridEditDoneEventArgs **falso*-
    CellEditExit Dispara 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, dispara quando uma linha **sai do modo de edição*- IgcGridEditDoneEventArgs **falso*-

    Event Cancellation

    • RowEditEnter- NemRow​Cell entrará no modo de edição.
    • CellEditEnter- Impede a entrada na edição da célula. SerowEditable estiver ativada, a edição de linha será acionada, embora a edição por célula continue proibida.
    • CellEdit- PermitidoCell e/ouRow editar, ao apertar o botão Concluído ou Enter não compromete o valor ou a transação da linha. A edição de células e a edição de linha não serão fechadas até o botão Cancelar ser clicado.
    • RowEdit- A célula de comprometimento é possível, mas não a fileira inteira. A linha permanecerá no modo de edição e a transação da linha será considerada aberta. Apertar Concluído não compromete nem fecha a linha. O botão Cancelar fecha o processo de edição e a transação sem comprometer 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