[KENDO + Jquery UI] Reordenando filas de un grid realizado con Kendo

Introducción

Llevo un tiempo en un proyecto web en el que estamos utilizando los controles Kendo realizados por Telerik para hacer una experiencia de usuario un poco mejor.

A pesar de los muchos problemas que nos hemos encontrado (Gonzalo y Alex os incluyo) para adaptarlos a las verdaderas necesidades del cliente, bajo mi punto de vista están quedando bastante bien-

Anteriormente a la utilización de los controles de Kendo, pese a que la decisión de usar Kendo era desde casi el inicio del proyecto, se decidió usar como control GRID SlickGrid en una versión anterior a la actual y que, también bajo mi criterio, contaba con características inferiores a Kendo GRID.

En una de las vistas donde teníamos un SlickGrid implementado que permitía al usuario final la reordenación de las filas haciendo “Drag and Drop”. El cliente ya había visto está funcionalidad, y para está ultima vista todavía éramos reacios a cambiar Slick por Kendo, pero finalmente me lance a la piscina.

Bien, ya entrados en “historia”, vamos al lio, vamos a ver como implementar “Drag and Drop” en Kendo Grid, ya que no viene implementado en la API de Kendo (al menos de momento), y para ello vamos a utilizar Jquery UI Sortable.

Al turron!

Para utilizar sortable dentro de KendoGrid será necesario que utilicemos el selector correcto para elegir las filas de la tabla:

$('#myGridName table tbody').sortable({
            connectWith: "#myGridName table tbody"
        });

Como podéis ver es realmente sencillo, y te da la potencia de usar Jquery Sortable y de los eventos que posee por si necesitas realizar alguna acción más.

 

Espero que os sea de utilidad.