Para habilitar la edición del SlickGrid vamos a utilizar dos propiedades de las opciones de configuración del grid:
- editable: indica si el grid permite la edición del contenido. Por defecto está desactivado.
- autoEdit: indica si la celda entra en modo de edición automáticamente al recibir el foco. De no ser así, el modo de edición se activa al hacer doble click sobre la celda o al pulsar la tecla Enter. Por defecto está activado.
Para poder editar las celdas del grid, además de establecer éste como editable, debemos asignar a la columna que deseamos editar un Editor a través de la propiedad editor de la columna.
El Editor es un objeto cuyo constructor recibe como parámetro un objeto con las siguientes propiedades:
- column: definición de la columna
- container: objeto DOM contenedor de la celda
- grid: instancia del grid
- gridPosition: posición del grid en la página
- item: objeto de datos de la fila de la celda
- position: posición de la celda en la página
- cancelChanges(): método para descartar los cambios
- commitChanges(): método para confirmar los cambios
El Editor debe implementar los siguientes métodos:
- destroy(): método en el que se debería eliminar cualquier dato, evento u objeto creado por el Editor
- focus(): establece el control en el Editor
- isValueChanged(): devuelve un valor indicando si el valor de la celda ha sido modificado por el usuario
- serializeValue(): devuelve el valor editado por el usuario. Puede ser cualquier objeto. La única restricción es que tiene que ser persistente incluso después de "destruir" el Editor
- loadValue(item): carga en el editor el valor del campo a partir del objeto de datos item recibido como parámetro
- applyValue(item, state): aplica el valor del editor recibido en el parámetro state al objeto de datos item. El valor de state ha sido serializado mediante el método serializeValue. Esta función puede ser llamada después de "destruir" el Editor por lo que el código contenido en ella no debería depender de datos u objetos creados por éste.
- validate(): comprueba el valor introducido por el usuario y devuelve un objeto indicando si es un valor válido. El objeto devuelto tiene dos propiedades: valid que devuelve true o false indicando si el valor se considera válido y msg que devuelve un mensaje de error en caso de que el valor no haya sido considerado válido
Opcionalmente el Editor puede implementar también otros tres métodos:
- hide(): si se implementa, el grid llama a este método cuando el usuario hace scroll en el grid dejando la celda en modo de edición fuera de las celdas visibles
- show(): si se implementa, el grid llama a este método cuando el usuario hace scroll en el grid volviendo a mostrar la celda en modo de edición que no se encontraba a la vista
- position(cellBox): si se implementa, el grid llama a este método cuando cambia la posición de la celda en la página (normalmente al hacer scroll, sea en el grid o en la página)
Bueno, basta de teoría. En el siguiente artículo mostraré cómo podemos crear editores y habilitar la edición en el grid que hemos ido creando en los ejemplos anteriores.
El código
Puedes descargar el código de todos los ejemplos de SlickGrid de:
Artículo siguiente:
SlickGrid. Habilitando la edición (y II) - Creando los editores
No hay comentarios:
Publicar un comentario