[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Edição de grade de Web Components

A Tabela de Dados/Grade de Dados do Ignite UI for Web Components oferece suporte à edição de células e linhas com atualização em lote. Observe que, no momento, isso está limitado a colunas sem modelo.

Web Components Grid Editing Example

Visão geral

A edição na grade de dados Web Components é configurada usando a editMode opção da grade Web Components. Esta propriedade tem três opções diferentes, listadas abaixo:

None: a edição não está habilitada.
Cell: permite que as células entrem no modo de edição e confirmem o valor ao sair do modo de edição.
CellBatch: permite que as células entrem no modo de edição, mas as alterações serão armazenadas em cache posteriormente até serem confirmadas.
Row: permite que as linhas entrem no modo de edição e confirmem o valor ao sair.

Quando definido como CellBatch, para confirmar as alterações, você deve executar o método commitEdits da grade. A grade colocará as células em itálico até que sejam confirmadas, fornecendo controle sobre quando enviar as alterações de volta para a fonte de dados.

Além disso, o tratamento de erros pode ser realizado conectando o evento onCellValueChanging e inspecionando novos valores antes que eles sejam confirmados. A grade expõe um método setEditError que pode gerar uma mensagem de erro. Isso mantém a célula no modo de edição até que um valor válido seja inserido. Caso contrário, o método rejectEdit da grade pode ser realizado para reverter o valor inválido. Se nenhum valor inválido for encontrado, você também pode confirmar suas alterações chamando o método acceptEdit da grade.

Os commits podem ser aprovados ou recusados no nível da grade conectando onDataCommitting por meio dos métodos acceptCommit ou rejectCommit passando o argumento do evento commitID como parâmetro. Este evento também expõe uma coleção de changes que armazena todas as modificações antes de serem confirmadas. Por exemplo, você pode verificar se um commit foi de uma operação add, update ou delete por meio da propriedade TransactionType exposta na coleção de changes e executar um acceptCommit ou rejectCommit quando necessário.

Excel Style Editing

editOnKeyPress permite que você comece a editar instantaneamente ao digitar, semelhante ao comportamento do Excel. Além disso, você pode definir a propriedade editModeClickAction como SingleClick para permitir que os usuários editem células rapidamente enquanto navegam para outras células. Por padrão, é necessário clicar duas vezes para entrar no modo de edição.

Code Snippet

A seguir, demonstramos como configurar a edição na grade de dados e confirmar os dados.

<button id="clickCommit">Commit</button>
<igc-data-grid id="grid"
    height="100%"
    width="100%"
    activation-mode="Cell"
    edit-mode="Cell">
</igc-data-grid>

import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

this.onCommitClick = this.onCommitClick.bind(this);

public onCommitClick() {
    this.grid.commitEdits();
}

Undo/Redo batch changes

A seguir, demonstramos como reverter alterações enquanto a atualização em lote está habilitada.

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      activation-mode="Cell"
      edit-mode="Cell">
</igc-data-grid>
<button id="undoClick" disabled="true">Undo</button>
<button id="redoClick" disabled="true">Redo</button>

import { IgcDataGridComponent } from 'igniteui-webcomponents-grids';

public onUndoClick() {
    this.grid.undo();
    if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null)
    {
        this.redo.disabled = false;
    }
}

public onRedoClick() {
    this.grid.redo();
}

Error Validation and Commit Integrity

O seguinte demonstra como incorporar erros verificando se as células estão vazias ao sair do modo de edição e aceitando confirmações provenientes apenas de células atualizadas.

<igc-data-grid
    id="grid"
    height="calc(100% - 50px)"
    width="100%"
    activation-mode="Cell"
    selection-mode="SingleRow"
    default-column-min-width="125"
    is-column-options-enabled="true"
    auto-generate-columns="false"
    edit-mode="Cell">

import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-grids';
import { TransactionType } from 'igniteui-webcomponents-core'

this.onCellValueChanging = this.onCellValueChanging.bind(this);
this.grid.cellValueChanging = this.onCellValueChanging;

this.onDataCommitting = this.onDataCommitting.bind(this);
this.grid.dataCommitting = this.onDataCommitting;


public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) {
    if (s.editMode === EditModeType.CellBatch && this.undo !== null)
    {
        this.undo.disabled = false;
    }

    //check if value is empty upon exiting edit mode.
    if (e.newValue === "") {
        s.setEditError(e.editID, "Error, cell is empty");
        //or revert changes
        s.rejectEdit(e.editID);
    }
    else {
        s.acceptEdit(e.editID);
    }
}

public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) {
    if (e.changes[0].transactionType === TransactionType.Update) {
        //commit was passed
        s.acceptCommit(e.commitID);
    }
    else{
        //commit was prevented
        s.rejectCommit(e.commitID);
    }
}