Edición de cuadrícula React

    The Ignite UI for React Cell Editing feature in React Grid provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The IgrGrid provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:

    Setup

    In order to specify which edit mode should be enabled, the IgrGrid exposes the following boolean properties - editable and rowEditable.

    The editable property enables you to specify the following options:

    • falso: se deshabilitará la edición de la columna correspondiente. Este es el valor predeterminado.
    • verdadero: se habilitará la edición de la columna correspondiente.

    Keep in mind that if the column is not editable, you can still modify its value through the public API exposed by the IgrGrid.

    The rowEditable property enables you to specify the following options:

    • falso: se deshabilitará la edición de filas en la cuadrícula correspondiente. Este es el valor predeterminado.
    • verdadero: se habilitará la edición de filas en la cuadrícula correspondiente.

    In the IgrGrid, if you set rowEditable property to true, and the editable property is not explicitly defined for any column, the editing will be enabled for all the columns except the primary key.

    • Edición de celdas y por lotes: en este escenario, cada modificación de cada celda se conserva por separado y las operaciones de deshacer/rehacer están disponibles a nivel de celda;
    • Edición de filas y por lotes: en este escenario, las modificaciones se conservan a nivel de fila, por lo que las operaciones de deshacer/rehacer no funcionarán para cada celda que se modifique, sino para el grupo de celdas de cada fila.

    Editing Templates

    If you want to use a data type specific edit templates, you should specify the column's dataType property. So let's now see what are the default templates for each type:

    • For string data type, default template is using IgrInput.
    • For number data type, default template is using IgrInput type="number", so if you try to update cell to a value which can not be parsed to a number your change is going to be discarded, and the value in the cell will be set to 0.
    • For date data type, default template is using IgrDatePicker
    • For dateTime data type, default template is using DateTimeEditor. This editor will give you a mask directions for the input elements part of the DateTime object.
    • For time - data type, default template is using TimePicker.
    • For boolean data type, default template is using IgrCheckbox.
    • For currency data type, default template is using InputGroup with prefix/suffix configuration based on application or grid locale settings.
    • For percent data type, default template is using InputGroup with suffix element that shows a preview of the edited value in percents.

    Todos los tipos de datos de columna disponibles se pueden encontrar en el tema oficial Tipos de columna.

    Event Arguments and Sequence

    La cuadrícula expone una amplia gama de eventos que brindan un mayor control sobre la experiencia de edición. Estos eventos se activan durante el ciclo de vida de Edición de filas y Edición de celdas: al iniciar, confirmar o cancelar la acción de edición.

    Evento Descripción Argumentos Para interrumpir
    RowEditEnter SiRowEditing está habilitado, se activa cuando una fila ingresa al modo de edición IgrGridEditEventArgs verdadero
    CellEditEnter Se activa cuando una celda ingresa al modo de edición (después deRowEditEnter) IgrGridEditEventArgs verdadero
    CellEdit Si se cambia el valor, se dispara justo antes de que se confirme el valor de una celda (por ejemplo, presionando ENTER) IgrGridEditEventArgs verdadero
    CellEditDone Si se cambia el valor, se activa después de que se haya editado una celda y se haya confirmado el valor de la celda. IgrGridEditDoneEventArgs FALSO
    CellEditExit Se activa cuando una celda sale del modo de edición IgrGridEditDoneEventArgs FALSO
    RowEdit SiRowEditing está habilitado, se activa justo antes de que se confirme el valor de una fila en el modo de edición (por ejemplo, al hacer clic en el botónDone en la superposición de edición de filas) IgrGridEditEventArgs verdadero
    RowEditDone SiRowEditing está habilitado, se activa después de que se haya editado una fila y se haya confirmado el valor de la nueva fila. IgrGridEditDoneEventArgs FALSO
    RowEditExit SiRowEditing está habilitado, se activa cuando una fila sale del modo de edición IgrGridEditDoneEventArgs FALSO

    Event Cancelation

    • RowEditEnter - Neither Row nor Cell will enter edit mode.
    • CellEditEnter - Prevents entering cell edit. If rowEditable is enabled, row edit will be triggered, although cell edit will remain forbidden.
    • CellEdit - Allowed Cell and/or Row edit, hitting Done button or Enter won't commit the value or row transaction. Cell editing and Row editing won't be closed until Cancel button is clicked.
    • RowEdit - Committing cell is possible, but not the whole row. The row will stay in edit mode and the row transaction will be considered open. Hitting Done does not commit or close the row. Cancel button closes the editing process and the transaction without committing the changes.

    El siguiente ejemplo demuestra la secuencia de ejecución de edición en acción:

    Features integration

    Mientras una celda/fila está en modo de edición, un usuario puede interactuar con la cuadrícula de muchas maneras. La siguiente tabla especifica cómo una determinada interacción afecta la edición actual:

    Red Filtración Clasificación Paginación Moviente Fijar Ocultación Agrupar por Cambiar el tamaño Escapar Ingresar F2 Pestaña Clic en la celda Agregar nueva fila/Eliminar/Editar
    Mantener el modo de edición ✔
    Salir del modo de edición ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
    Comprometerse ✔ ✔ ✔ ✔ ✔
    Desechar ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

    Como se ve en la tabla, todas las interacciones, excepto cambiar el tamaño de una columna, finalizarán la edición y descartarán los nuevos valores. En caso de que se confirme el nuevo valor, el desarrollador puede hacerlo en el evento "-ing" de característica correspondiente.

    Ejemplo de cómo confirmar nuevos valores, si el usuario intenta ordenar la columna mientras una celda/fila está en modo de edición:

    function onSorting(args: IgrSortingEventArgs) {
    const grid = args.target as IgrGrid;
    grid.endEdit(true);
}

<IgrGrid data={localData} primaryKey="ProductID" onSorting={onSorting}>
</IgrGrid>

    API References

    Additional Resources