How to reorder Gridview rows using Jquery?

Question

I am using Drag and Drop for sorting rows of grid,

In this process i want Order(Sequence) of dragged row to be changed dynamically like if i drag 3rd row to 1st place i want it(order) to change to 1 dynamically.

I am not getting any idea of how to loop and change order dynamically.

var SortedIDs = "";
$(".gvSortPorts").find("tbody > tr").each(function () {
    SortedIDs += $(this).attr("id") + "1";
});

Can any one please help in giving idea, i want it acheive using jquery.

Answer 1

Add the following JQuery and Tablesorter javascript files references inside page head section.

<script src="scripts/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="scripts/jquery.tablesorter.min.js" type="text/javascript"></script>

Finally call the tablesorter function on gridview to make your gridview sortable.

<script type="text/javascript">
   $(document).ready(function() {

      $("#GridView1").tablesorter();

   });
</script>

Reference:

http://www.ezzylearning.com/tutorial.aspx?tid=2168345

For Drag And Drop:

http://forums.asp.net/t/1615668.aspx/1

Hope its helpful.

Answer 2

There are number of jquery plugin available for sorting:

i have use Datatable which provide you a way which will help you alot. you can do customization as you want and it provides number of features like pagging, search, sorting etc.

Hope this will resolve your problem.