React edición de cuadrícula
La Ignite UI for React Data Table/Data Grid admite la edición de celdas y filas con actualización por lotes. Tenga en cuenta que esto está actualmente limitado a columnas sin plantilla.
React Grid Editing Example
Descripción general
La edición en la cuadrícula de datos React se configura utilizando la opción editMode
de la cuadrícula React. Esta propiedad tiene tres opciones diferentes, que se enumeran a continuación:
None
: la edición no está habilitada.Cell
: permita que las celdas ingresen al modo de edición y confirme el valor al salir del modo de edición.CellBatch
: permite que las celdas entren en modo de edición, pero los cambios se almacenarán en caché más tarde hasta que se confirmen.Row
: permite que las filas entren en modo de edición y confirmen el valor al salir.
Cuando se establece en CellBatch
, para confirmar los cambios debe realizar el método commitEdits
desde la cuadrícula. La cuadrícula pondrá en cursiva las celdas hasta que se confirmen, lo que proporciona control sobre cuándo enviar los cambios a la fuente de datos.
Además, el manejo de errores se puede realizar conectando el evento onCellValueChanging
e inspeccionando nuevos valores antes de confirmarlos. La cuadrícula expone un método setEditError
que puede generar un mensaje de error. Esto mantiene la celda en modo de edición hasta que se ingresa un valor válido. De lo contrario, se puede ejecutar el método rejectEdit
de la cuadrícula para revertir el valor no válido. Si no se encuentra ningún valor no válido, también puede confirmar los cambios llamando al método acceptEdit
de la cuadrícula.
Las confirmaciones se pueden aprobar o rechazar en el nivel de la grilla conectando onDataCommitting
a través de los métodos acceptCommit
o rejectCommit
pasando el argumento del evento commitID
como parámetro. Este evento también expone una colección changes
que almacena todas las modificaciones antes de confirmarse. Por ejemplo, puede verificar si una confirmación proviene de una operación de agregar, actualizar o eliminar a través de la propiedad TransactionType
expuesta en la colección changes
y realizar una acceptCommit
o rejectCommit
cuando sea necesario.
Excel Style Editing
editOnKeyPress
le permite comenzar a editar instantáneamente al escribir de manera similar a como se comporta Excel. Además, puede configurar la propiedad editModeClickAction
en SingleClick
para permitir a los usuarios editar celdas rápidamente mientras navegan a otras celdas. De forma predeterminada, es necesario hacer doble clic para ingresar al modo de 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-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-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-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);
}
}
API References
CellBatch
editModeClickAction
editMode
SingleClick
TransactionType