Drag and Drop GridView rows using jQuery

With continuation with my Grid View series posts, In this post, I will show you how to rearrange the grid view rows via dragging and dropping rows using jQuery. For your information, GridView is rendered as table format. So to support drag and drop functionality to table rows, we will use plugin named "TableDnD". This plugin plugin allows the user to reorder rows within a table. You can download this plugin from here.

All you need to do is to call the function, "tableDnD()" on the grid view and you are done. See below jQuery code.

$(document).ready(function() {    $("#<%=gdRows.ClientID%>").tableDnD(); }); 

You can also add style to let user know that which rows is selected and dropped. As in below image, the 4th row is selected.

To do this, you need to assign a css class to "onDragClass" option of this plugin. See below jQuery code.

$(document).ready(function() {    $("#<%=gdRows.ClientID%>").tableDnD({      onDragClass: "myDragClass"    }); }); 

Hope you have find this useful!!!!!!

Download Code

To find out all the available option with this plugin, read this article.

Feel free to contact me for any help related to jQuery, I will gladly help you.