KendoUI: Sortable Widget

My friend kept challenging me about jQuery UI Sortable and my implementation of KendoUI Sortable Lists. He asked me to go a step further and implement a Sortable Grid that would allow to move cells in horizontal and vertical.

KendoUI Sortable Grid

KendoUI Sortable Grid: See it in action

I think that the very best is see what it can do:

But, it does not actually to be a regular grid (all cell with the same width):

Not even just static content elements, they might be other KendoUI widgets:

KendoUI Sortable Grid: Description

Basically you define an HTML element that contains group of HTML elements (rows). Each row contains a list of HTML elements (cells).

So, this widget is able to:

• Move a cells inside a row or between rows.
• If a row gets empty (no cells on it after a move), then the row is removed.
• If you drop a cell in the space between rows (in the videos it has been styled as box in slightly darker border), then a new row is inserted with the element being dragged.