Mashup Builder > Widgets > Widgets estándar > Widget de rejilla > Edición de datos en el widget de rejilla
Edición de datos en el widget de rejilla
Para activar la edición dentro del widget de rejilla, siga los siguientes pasos:
1. En Mashup Builder, seleccione el widget de rejilla en el lienzo o utilice el panel Explorador.
2. En el panel Propiedades, defina IsEditable en verdadero y, a continuación, pulse en el botón de configurar widget para abrir el cuadro de diálogo de configuración del widget.
3. En el panel izquierdo, elija una columna y, a continuación, en el panel derecho, seleccione la casilla Editable.
Opcionalmente, configure las siguientes opciones:
Seleccione la casilla Obligatorio para requerir siempre un valor al editar el contenido de la celda.
Defina una expresión de validación en el cuadro Expresión de validación para aplicar reglas de validación al contenido de la celda.
Defina los mensajes y los detalles que se deben mostrar para la validación.
4. Repita el paso anterior para cualquier columna que desee editar.
5. Pulse en Terminado para cerrar el cuadro de diálogo y guardar el mashup.
Selección de un modo de edición
Para controlar cómo se puede editar la rejilla en tiempo de ejecución, defina la propiedad EditLevel del widget en una de las siguientes opciones:
Toda la rejilla: permite editar celdas individuales y guardar los cambios manualmente mediante un botón o un servicio.
Una sola fila: permite editar las filas individualmente mediante un formulario.
Una sola celda: permite editar las celdas individualmente y guardar los cambios automáticamente al terminar la edición.
Cuando se edita una columna que tiene activada la validación, se evalúa la entrada para asegurarse de que los datos introducidos sean válidos. Cuando la validación falla, se muestra un mensaje de error y los cambios no se guardan. Para obtener más información sobre la validación, consulte Validación de entradas en la rejilla.
También se puede activar la propiedad EditButton en lugar de la propiedad IsEditable. Si esta propiedad se define en verdadero, se añade un botón de edición a la barra de herramientas de la rejilla. Se puede pulsar en el botón en tiempo de ejecución para activar o desactivar el modo de edición.
Modo de edición de la rejilla
El modo de edición de la rejilla permite actualizar múltiples celdas y luego pulsar en el botón Guardar para guardar todos los cambios a la vez.
En la siguiente imagen se muestran los botones de edición en el área superior izquierda del widget en tiempo de ejecución al editar la rejilla completa.
Cuando se pulsa en Editar, se muestran los botones Guardar y Cancelar. Los controles de edición se muestran para cada celda que tiene la edición activada en la rejilla. Se pueden editar datos de una o varias celdas y, a continuación, pulsar en Guardar para guardar las modificaciones. Para realzar las celdas que contienen modificaciones sin guardar, defina la propiedad HighlightDraftState en verdadero. Se utiliza un color de fondo diferente para indicar las celdas con modificaciones.
Los siguientes eventos de edición están disponibles para este modo:
EditStarted: se activa al pulsar en Editar.
EditCompleted: se activa al pulsar en Guardar.
EditCancelled: se activa al pulsar en Cancelar.
Modo de edición de filas
La edición de filas permite editar una fila a la vez. Cuando se active este modo, se añade al lado izquierdo de la rejilla una columna que contiene controles de edición. En la siguiente imagen se muestra el widget de la rejilla en modo de edición de filas.
Para editar una fila, pulse en el icono de edición o en el vínculo. Se muestra un formulario de edición en el que se incluyen las celdas de la fila. Después de realizar las modificaciones de los valores, pulse en Actualizar para guardar los cambios realizados en la fila actual.
Los siguientes eventos de edición están disponibles para este modo:
EditRowStarted: se activa al pulsar el icono de edición o el vínculo para empezar a editar una fila mediante el formulario.
EditRowCompleted: se activa al pulsar en Actualizar.
EditCancelled: se activa al pulsar en Cancelar.
Modo de edición de celdas
Los siguientes eventos de edición están disponibles para este modo:
EditCellStarted: se activa al pulsar el icono de edición o el vínculo para empezar a editar una celda.
EditCellCompleted: se activa al pulsar la tecla INTRO o al pulsar fuera de la celda después de cambiar el valor.
EditCancelled: se activa cuando se cancela la edición de la celda.
Para editar una celda, pulse en el icono o el vínculo de edición. Cuando el cuadro de edición está activo, el valor bruto se muestra sin ningún formato. Una vez finalizada la edición, se aplica el procesador de columnas para dar formato al valor. Para obtener más información sobre los procesadores, consulte Procesadores y formatos de columnas de rejilla.
* 
Para cancelar una edición sin guardar los cambios, pulse la tecla ESC.
Configuración de los controles de edición
Utilice la propiedad EditControlType para mostrar un icono o un vínculo para el control de edición. El icono se puede reemplazar por cualquier entidad multimedia en el servidor mediante la propiedad EditControlIcon. Para cambiar el rótulo de edición por defecto del vínculo, utilice la propiedad EditControlLabel. Por defecto, los controles de edición se muestran al colocar el puntero sobre una celda. La visibilidad de los controles de edición se puede configurar mediante la propiedad EditControlVisibility.
Activación de la edición mediante datos de configuración JSON
Añada la siguiente propiedad global de nivel superior para activar la edición de celdas en la configuración JSON.
var config = { “cellEditingEnabled”: true, “columns”: ... } };
Para activar la edición de una columna, añada los siguientes datos JSON:
...
“ColumnFormatter”: {
“type”: “boolean”,
“format”: “notext”,
“cellEditor”: {
“enabled”: true, // *{boolean} to indicate whether cell editing is enable for this column
},
}
...
¿Fue esto útil?