Edición en Kendo Grid: Modos y Alternancia Dinámica

Kendo UI Grid para jQuery es una herramienta poderosa para mostrar datos tabulares en aplicaciones web. Una de sus funcionalidades esenciales es la capacidad de permitir a los usuarios editar esos datos directamente en la interfaz. Este artículo te guiará a través de las diferentes formas de hacer que tu Kendo Grid sea editable, incluyendo cómo alternar el modo de edición dinámicamente y los distintos modos de edición disponibles.

Alternar el Modo Editable del Grid con un Botón

Imagina que deseas dar a tus usuarios la flexibilidad de activar o desactivar la edición en el grid según sus necesidades. Kendo UI Grid te permite implementar esto fácilmente añadiendo un botón a la barra de herramientas (toolbar) del grid. Al hacer clic en este botón, podrás cambiar dinámicamente el estado de edición del grid.

Para lograr esto, utilizaremos el método setOptions de Kendo Grid, que permite modificar las opciones del grid en tiempo de ejecución. Aquí te mostramos cómo hacerlo paso a paso:

1. Define el modo de edición: Primero, decide qué modo de edición deseas utilizar. Las opciones son inline, incell y popup. Por ejemplo, definamos inline como modo predeterminado: let editMode = "inline";
2. Añade un botón a la barra de herramientas: Configura la propiedad toolbar del grid para incluir un botón personalizado. Este botón tendrá una clase CSS (k-grid-toggleEditable) para poder referenciarlo posteriormente:

toolbar: [{ template: 'Alternar Edición' }] 

1. Maneja el evento dataBound: El evento dataBound se dispara cada vez que el grid se enlaza a datos. Dentro de este evento, obtendremos una referencia al botón que creamos y definiremos la lógica para alternar el modo de edición:

dataBound: function (ev) { let grid = this, commands = grid.content.find(".k-command-cell").children("a"), editable = grid.options.editable, toggleButton = $(".k-grid-toggleEditable"); toggleButton.click(function (e) { e.preventDefault(); if (editable) { // Desactivar el modo de edición si el grid está actualmente editable. grid.setOptions({ editable: false }); } else { // Activar el modo de edición. grid.setOptions({ editable: editMode }); } }); // Cambiar el texto del botón según el estado del grid. editable ? toggleButton.text("Desactivar Edición"): toggleButton.text("Activar Edición"); // Si el grid no es editable, deshabilitar los comandos de columna (opcional). commands && !editable ? commands.addClass("k-disabled"): commands.removeClass("k-disabled"); } 

Explicación del código:

• Obtenemos referencias al grid, los comandos de columna (botones de edición, eliminar, etc.), el estado editable actual del grid y el botón personalizado.
• Añadimos un evento click al botón. Al hacer clic, verificamos si el grid es actualmente editable.
• Si es editable, llamamos a grid.setOptions({ editable: false }) para desactivar la edición.
• Si no es editable, llamamos a grid.setOptions({ editable: editMode }) para activar la edición en el modo definido (en este caso, inline).
• Cambiamos el texto del botón para reflejar el estado actual del grid ("Desactivar Edición" si está editable, "Activar Edición" si no lo está).
• Opcionalmente, deshabilitamos los comandos de columna cuando el grid no es editable para evitar acciones de edición accidentales.

Modos de Edición en Kendo Grid

Kendo UI Grid ofrece tres modos de edición principales, cada uno con su propio comportamiento e interfaz de usuario:

• Modo Inline (inline): La edición en línea es el modo más común. Cuando un usuario comienza a editar una fila, las celdas de esa fila se transforman en campos de entrada directamente en el grid. Los cambios se guardan o cancelan para toda la fila.
• Modo Incell (incell): En la edición en celda, solo la celda que se está editando se transforma en un campo de entrada. Esto permite una edición más granular y enfocada, celda por celda.
• Modo Popup (popup): Con la edición emergente, al iniciar la edición de una fila, se abre una ventana emergente (popup) que contiene un formulario con los campos de la fila. Este modo es útil para filas con muchos campos o cuando se requiere más espacio para la edición.

Habilitando la Edición en el Grid

Por defecto, el Kendo Grid no es editable. Para activar la funcionalidad de edición, debes configurar la propiedad editable del grid y definir el tipo de modo de edición que deseas utilizar.

Además, para que la edición sea completamente funcional, generalmente necesitarás configurar el DataSource del grid para manejar las operaciones CRUD (Crear, Leer, Actualizar, Eliminar) con el servidor. Esto implica definir las URLs y los métodos HTTP para cada operación.

Aquí un ejemplo básico de configuración del DataSource:

var dataSource = new kendo.data.DataSource({ transport: { read: "/Products", // URL para obtener datos update: { url: "/Products/Update", // URL para actualizar un registro type: "POST" }, destroy: { url: "/Products/Destroy", // URL para eliminar un registro type: "POST" }, create: { url: "/Products/Create", // URL para crear un nuevo registro type: "POST" } }, batch: true // Envía los cambios al servidor en lote (opcional) }); 

Definiendo el Modelo de Datos (schema.model)

Es crucial definir el modelo de datos en el schema del DataSource. Esto incluye especificar el campo id para identificar de forma única cada registro y definir los tipos de datos de cada campo. Definir los tipos de datos correctamente permite a Kendo Grid utilizar los editores apropiados (como NumericTextBox para números, DatePicker para fechas, etc.) y asegurar el correcto funcionamiento de la validación, el filtrado y la ordenación.

Ejemplo de configuración del schema.model:

var dataSource = new kendo.data.DataSource({ schema: { model: { id: "id", // Campo identificador único fields: { id: { editable: false, nullable: true }, // No editable, puede ser nulo al crear name: { type: "string", validation: { required: true } }, // Campo de texto obligatorio price: { type: "number", defaultValue: 42 }, // Campo numérico con valor por defecto discontinued: { type: "boolean" }, // Campo booleano (checkbox editor) created: { type: "date" }, // Campo de fecha (datepicker editor) supplier: { type: "object", defaultValue: { companyName: "Progress", companyId: 1 } } // Campo objeto } } } }); 

Tipos de Datos y Editores

La siguiente tabla resume los tipos de datos más comunes en Kendo Grid y los editores y formatos asociados:

Ejemplo de Grid Editable en Modo Incell

Aquí tienes un ejemplo de cómo configurar un Kendo Grid en modo de edición incell con funcionalidades CRUD básicas:

$("#grid").kendoGrid({ toolbar: [ "create", "save", "cancel" ], // Barra de herramientas con botones Crear, Guardar y Cancelar columns: [ "name", // Columna 'name' editable { command: [ "destroy" ] } // Columna de comandos con botón 'destroy' (eliminar) ], dataSource: dataSource, // DataSource configurado previamente editable: "incell" // Activar el modo de edición incell }); 

Para modos inline o popup, simplemente cambia la propiedad editable a "inline" o "popup" respectivamente.

Reordenando Columnas en Kendo Grid

Aunque el texto proporcionado se centra en la edición, también menciona brevemente la reordenación de columnas. Kendo Grid permite a los usuarios reordenar columnas de dos maneras:

• Arrastrando los encabezados de las columnas: Simplemente habilitando la propiedad reorderable: true en la configuración del grid, los usuarios podrán arrastrar y soltar los encabezados de las columnas para reordenarlas visualmente.
• Reordenación manual mediante programación: Puedes reordenar columnas mediante código utilizando el método reorderColumn. Este método te permite especificar la columna que deseas reordenar y su nueva posición (índice).

Para habilitar la reordenación por arrastre, la configuración es muy sencilla:

$("#grid").kendoGrid({ // ... otras configuraciones ... reorderable: true // Habilitar la reordenación de columnas por arrastre }); 

Preguntas Frecuentes (FAQ)

1. ¿Cuál modo de edición debo elegir: inline, incell o popup?

   La elección depende de tus necesidades y la complejidad de los datos. Inline es adecuado para grids simples donde la edición de filas completas es común. Incell es ideal para edición rápida de celdas individuales. Popup es útil para filas con muchos campos o cuando necesitas más espacio para editores complejos.

2. ¿Es necesario configurar el DataSource para la edición?

   Sí, para una edición funcional que persista los cambios en el servidor, es esencial configurar correctamente el DataSource para las operaciones CRUD. Sin esto, la edición será solo local y los cambios no se guardarán.

   

3. ¿Cómo puedo validar los datos introducidos por el usuario durante la edición?

   Kendo Grid permite definir reglas de validación en el schema.model de tu DataSource. Puedes especificar validaciones requeridas, formatos, rangos, etc. Kendo Grid mostrará mensajes de error si la validación falla.

4. ¿Puedo personalizar los editores que se utilizan para cada columna?

   Sí, Kendo Grid es altamente personalizable. Puedes definir editores personalizados para cada columna utilizando las opciones de configuración de las columnas. Puedes usar widgets Kendo UI como DropDownList, DatePicker, NumericTextBox, o incluso crear tus propios editores personalizados.

En resumen, Kendo UI Grid ofrece una amplia gama de opciones para hacer tus grids editables, desde la simple activación/desactivación del modo de edición hasta la configuración detallada de los modos de edición y el manejo de datos con un DataSource robusto. Con este conocimiento, puedes crear interfaces de usuario interactivas y eficientes para la gestión de datos en tus aplicaciones web.