Edición de cuadrícula React

La Ignite UI for React admite la edición de celdas y filas con actualizaciones por lotes. Tenga en cuenta que, por el momento, esto está limitado a columnas sin plantilla.

React Grid Editing Example

Descripción general

Editing in the React data grid is configured by using the editMode option of the React grid. This property takes three different options, listed below:

None: Editing is not enabled.
Cell: Allow cells to enter edit mode and commit the value on exiting edit mode.
CellBatch: Allows cells to enter edit mode but changes will be cached later until they are committed.
Row: Allow rows to enter edit mode and commit the value on exit.

When set to CellBatch, in order to commit the changes you must perform the commitEdits method from the grid. The grid will italicize the cells until they are committed providing control over when to push changes back to the datasource.

In addition, error handling can be performed by hooking the onCellValueChanging event and inspecting new values before they are committed. The grid exposes a setEditError method that can output an error message. This keeps the cell in edit mode until a valid value is entered. Otherwise the grid's rejectEdit method can be performed to revert the invalid value. If no invalid value is found, you can also commit your changes by calling the grid's acceptEdit method.

Commits can be approved or declined at the grid level by hooking onDataCommitting via the acceptCommit or rejectCommit methods passing the commitID event argument as the parameter. This event also exposes a changes collection which stores all the modifications prior to being committed. For example, you can check if a commit was from an add, update, or delete operation via the TransactionType property exposed on the changes collection and perform an acceptCommit or rejectCommit when necessary.

Excel Style Editing

editOnKeyPress enables you to instantly begin editing when typing similar to how Excel behaves. In addition you may set the editModeClickAction property to SingleClick to allow users to quickly edit cells while navigating to other cells. By default double-clicking is required to enter edit mode.

Code Snippet

A continuación se muestra cómo configurar la edición en la cuadrícula de datos y la confirmación de los datos.

<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 continuación se muestra cómo revertir los cambios mientras la actualización por lotes 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

A continuación se muestra cómo incorporar el error al verificar si las celdas están vacías al salir del modo de edición y se aceptan confirmaciones que provienen únicamente de celdas actualizadas.

<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);
    }
}