[!Note] Please note that this control has been deprecated and replaced with the Grid component, and as such, we recommend migrating to that control. This will not be receiving any new features, bug fixes will be deprioritized. For help or questions on migrating your codebase to the Data Grid, please contact support.

Web Components Edición de cuadrícula

La tabla de datos Ignite UI for Web Components / cuadrícula de datos admite la edición de celdas y filas con actualización por lotes. Tenga en cuenta que actualmente esto se limita a las columnas que no tienen plantilla.

Web Components Grid Editing Example

Descripción general

Editing in the Web Components data grid is configured by using the editMode option of the Web Components 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.

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.

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

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.

<button id="clickCommit">Commit</button>
<igc-data-grid id="grid"
    height="100%"
    width="100%"
    activation-mode="Cell"
    edit-mode="Cell">
</igc-data-grid>

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

this.onCommitClick = this.onCommitClick.bind(this);

public 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.

<igc-data-grid id="grid"
      height="100%"
      width="100%"
      activation-mode="Cell"
      edit-mode="Cell">
</igc-data-grid>
<button id="undoClick" disabled="true">Undo</button>
<button id="redoClick" disabled="true">Redo</button>

import { IgcDataGridComponent } from 'igniteui-webcomponents-data-grids';

public onUndoClick() {
    this.grid.undo();
    if (this.grid.editMode === EditModeType.CellBatch && this.redo !== null)
    {
        this.redo.disabled = false;
    }
}

public onRedoClick() {
    this.grid.redo();
}

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.

<igc-data-grid
    id="grid"
    height="calc(100% - 50px)"
    width="100%"
    activation-mode="Cell"
    selection-mode="SingleRow"
    default-column-min-width="125"
    is-column-options-enabled="true"
    auto-generate-columns="false"
    edit-mode="Cell">

import { IgcGridDataCommittingEventArgs } from 'igniteui-webcomponents-data-grids';
import { TransactionType } from 'igniteui-webcomponents-core'

this.onCellValueChanging = this.onCellValueChanging.bind(this);
this.grid.cellValueChanging = this.onCellValueChanging;

this.onDataCommitting = this.onDataCommitting.bind(this);
this.grid.dataCommitting = this.onDataCommitting;


public onCellValueChanging (s: IgcDataGridComponent, e: IgcGridCellValueChangingEventArgs) {
    if (s.editMode === EditModeType.CellBatch && this.undo !== null)
    {
        this.undo.disabled = false;
    }

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

public onDataCommitting (s: IgcDataGridComponent, e: IgcGridDataCommittingEventArgs) {
    if (e.changes[0].transactionType === TransactionType.Update) {
        //commit was passed
        s.acceptCommit(e.commitID);
    }
    else{
        //commit was prevented
        s.rejectCommit(e.commitID);
    }
}