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

La edición en la cuadrícula de datos de React se configura utilizando laeditMode opción de la cuadrícula React. Esta propiedad acepta tres opciones diferentes, que se enumeran a continuación:

None: La edición no está habilitada.
Cell: Permite que las celdas entren en modo de edición y comprometan el valor al salir del modo edición.
CellBatch: Permite que las celdas entren en modo edición, pero los cambios se almacenarán en caché más tarde hasta que se confirmen.
Row: Permitir que las filas entren en modo edición y comprometer el valor al salir.

Cuando se configura en ,CellBatch para poder confirmar los cambios debes realizar elcommitEdits método desde la cuadrícula. La cuadrícula pondrá las celdas en cursiva hasta que estén comprometidas, proporcionando control sobre cuándo enviar los cambios de vuelta a la fuente de datos.

Además, el manejo de errores puede realizarse enganchando elonCellValueChanging evento e inspeccionando nuevos valores antes de que se confirmen. La cuadrícula expone unsetEditError método que puede generar un mensaje de error. Esto mantiene la celda en modo edición hasta que se introduce un valor válido. De lo contrario, se puede realizar el método derejectEdit la cuadrícula para revertir el valor inválido. Si no se encuentra ningún valor inválido, también puedes confirmar tus cambios llamando al método deacceptEdit la cuadrícula.

Los commits pueden aprobarse o rechazarse a nivel de cuadrícula mediante el hookonDataCommitting mediante losacceptCommit métodos orejectCommit que pasan elcommitID argumento del evento como parámetro. Este evento también expone unachanges colección que almacena todas las modificaciones antes de ser comprometidas. Por ejemplo, puedes comprobar si un commit proviene de una operación de añadir, actualizar o eliminar mediante laTransactionType propiedad expuesta en lachanges colección y realizar unacceptCommit orejectCommit cuando sea necesario.

Excel Style Editing

editOnKeyPresste permite empezar a editar al instante al escribir, de forma similar a cómo se comporta Excel. Además, puedes configurar laeditModeClickAction propiedad paraSingleClick que los usuarios editen rápidamente celdas mientras navegan a otras celdas. Por defecto, es necesario hacer doble clic para entrar en modo edición.

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