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 aeditMode opção da grade React. Esta propriedade aceita três opções diferentes, listadas abaixo:

None: A edição não está ativada.
Cell: Permitir que as células entrem no modo de edição e comprometam 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 depois até que sejam confirmadas.
Row: Permitir que as linhas entrem no modo de edição e comprometam o valor ao sair.

Quando configurado paraCellBatch, para poder fazer commit das alterações você deve executar ocommitEdits método a partir da grade. A grade irá colocar as células em itálico até que elas sejam comprometidas, fornecendo controle sobre quando enviar as mudanças de volta para a fonte de dados.

Além disso, o tratamento de erros pode ser realizado ao hookar oonCellValueChanging evento e inspecionar novos valores antes que sejam confirmados. A grade expõe umsetEditError método 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 darejectEdit grade pode ser executado 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 daacceptEdit grade.

Commits podem ser aprovados ou recusados no nível da grade ao fazeronDataCommitting hook via métodosacceptCommit ourejectCommit que passam ocommitID argumento do evento como parâmetro. Este evento também expõe umachanges coleção que armazena todas as modificações antes de serem comprometidas. Por exemplo, você pode verificar se um commit veio de uma operação de adicionar, atualizar ou excluir via aTransactionType propriedade exposta nachanges coleção e realizar umacceptCommit ourejectCommit quando necessário.

Excel Style Editing

editOnKeyPresspermite que você comece a editar instantaneamente ao digitar, de forma semelhante ao que o Excel se comporta. Além disso, você pode configurar aeditModeClickAction propriedade paraSingleClick permitir que os usuários editem rapidamente células enquanto navegam para outras células. Por padrão, é necessário fazer duplo clique 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);
    }
}