Tenga en cuenta que este control ha quedado obsoleto y reemplazado con el componente Grid y, como tal, recomendamos migrar a ese control. Esto no recibirá ninguna característica nueva, las correcciones de errores no tendrán prioridad. Para obtener ayuda o preguntas sobre la migración de su código base a Data Grid, comuníquese con el soporte.
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.
<!DOCTYPE html><html><head><title>DataGridCellEditing</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css"type="text/css" /></head><body><divid="root"><divclass="container sample"><divclass="options horizontal"><buttonid="commitClick"disabled="true">Commit</button><buttonid="undoClick"disabled="true">Undo</button><buttonid="redoClick"disabled="true">Redo</button><spanclass="options-label">Edit Mode: </span><selectid="editModeDropBox"class="options-label"><option>Cell</option><option>CellBatch</option><option>Row</option><option>None</option></select><labelid="excel-style-editing" >Excel Style</label><spanclass="options-label">Edit Mode: </span><selectid="editModeClickActionDropBox"class="options-label"><option>SingleClick</option><option>DoubleClick</option></select></div><igc-data-gridid="grid"height="calc(100% - 3.5rem)"width="100%"activation-mode="Cell"selection-mode="SingleCell"default-column-min-width="125"is-column-options-enabled="true"auto-generate-columns="false"edit-mode-click-action="SingleClick"edit-mode="Cell"><igc-text-columnfield="Name"width="*>150"></igc-text-column><igc-text-columnfield="Street"header-text="Street"width="*>155"></igc-text-column><igc-text-columnfield="City"header-text="City"width="*>125"></igc-text-column><igc-numeric-columnfield="Salary"header-text="Salary"positive-prefix="$"show-grouping-separator="true"></igc-numeric-column><igc-image-columnfield="Photo"header-text="Photo"content-opacity="1"horizontal-alignment="center"width="*>90"></igc-image-column><igc-date-time-columnfield="Birthday"header-text="Date of Birth"width="*>140"></igc-date-time-column><igc-template-columnid="deleteRowColumn"field="Delete Row"header-text="Delete Row"width="*>140"is-column-options-enabled="false" ></igc-date-time-column></igc-data-grid></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
¿Te gusta esta muestra? Obtenga acceso a nuestro kit de herramientas de Ignite UI for Web Components completo y comience a crear sus propias aplicaciones en minutos. Descárgalo gratis.
Descripción general
La edición en la cuadrícula de datos de Web Components se configura mediante la editMode opción de la cuadrícula Web Components. Esta propiedad tiene tres opciones diferentes, que se enumeran a continuación:
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.
Edición de estilo de Excel
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.
Fragmento de código
A continuación se muestra cómo configurar la edición en la cuadrícula de datos y la confirmación de los datos.
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.