Edição de grade de React

O Ignite UI for React Data Table / Data Grid suporta edição de células e linhas com atualização em lote. Observe que isso está atualmente limitado a colunas não-templateadas.

React Grid Editing Example

Visão geral

A edição na grade de dados React é configurada usando a opção editMode da grade React. Essa propriedade aceita 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.

<IgrDataGrid
    height="100%"
    width="100%"
    activationMode="Cell"
    editMode="CellBatch" >
</IgrDataGrid>
<button onClick={this.onCommitClick}>Commit Data</button>

import { IgrDataGrid } from 'igniteui-react-data-grids';

onCommitClick = () => {
    this._grid.commitEdits();
}

Undo/Redo batch changes

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

<IgrDataGrid
    height="100%"
    width="100%"
    activationMode="Cell"
    editMode="CellBatch" >
</IgrDataGrid>
<button disabled={!this.canUndo} onClick={this.onUndoClick}>Undo</button>
<button disabled={!this.canRedo} onClick={this.onRedoClick}>Redo</button>

import { IgrDataGrid } from 'igniteui-react-data-grids';

onUndoClick = () => {
    this._grid.undo();

    // request a new render so the undo/redo buttons update.
    this.setState({ });
}

onRedoClick = () => {
    this._grid.redo();

    // request a new render so the undo/redo buttons update.
    this.setState({ });
}

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.

<IgrDataGrid
    height="100%"
    width="100%"
    dataSource={this.data}
    activationMode="Cell"
    cellValueChanging={this.onCellValueChanging}
    dataCommitting={this.onDataCommitting}>
</IgrDataGrid>

import { IgrGridDataCommittingEventArgs } from 'igniteui-react-data-grids';
import { TransactionType } from 'igniteui-react-core'

onCellValueChanging = (s: IgrDataGrid, e: IgrGridCellValueChangingEventArgs) => {
    //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);
    }
}

onDataCommitting = (s: IgrDataGrid, e: IgrGridDataCommittingEventArgs) => {

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