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.



2 thoughts on “KendoUI: Sortable Widget

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s