Reorder Gridview Asp.net JQuery : Drag Drop reorder of GridView Rows

15
Our Reader Score
[Total: 0 Average: 0]

 

Reorder Gridview: This article explains how to reorder or sort Asp.net Gridview control rows  .i.e. drag and drop row for sorting or change row position order of Gridview control with jQuery in asp.net c#.

For the drag-drop feature here we use jQuery UI sortable, using this enables drag and drop feature on our Asp.net Gridview control.

Basically, this makes our asp.net Gridview drag and drop rows to change their row positions.

Screenshot:
Reorder Gridview Asp.net JQuery : Drag Drop reorder of GridView Rows


# HTML Markup :

Here we added asp.net Gridview control and  asp.net Button control. Also need to import some js file like JQuery latest lib, jQuery Ui.js , and jQuery ui.css.

So finally our HTML markup look like as given below


# DataBase:

We having a table named as  programming_language_info where we have 4 columns  id_, language_name,  developed_by, sort_order.


# Code Behind:

First we create method as bindGridview,  this method will bind our Gridview control from the database, and will call this method on page_load  event.

 

So now hit F5 and you will see our Gridview is populated with data 🙂


# Jquery:  apply jQuery sortable to enable drag drop reorder feature on Gridview.

Currently, our Gridview is populated with data, but you will find drag and drop functionality is not there.

To add drag-drop functionality on our gridview we are using jQuery UI sortable.

So we can reorder or sort Gridview rows by just simple drag and drop row of Gridview control.

Yeah, we are done,  Hit F5 and now you will able to drag and drop Gridview row, i.e reorder of Gridview row.

But their a twist we are able to drag-drop and reorder the rows but not saving the changed rows ordering update database. So now we are going to save the changed ordering into our database.


# Code Behind: To save position of reordered rows of Gridview into the database.

 



Output :

Reorder Gridview Asp.net JQuery : Drag Drop reorder of GridView Rows

 

You can also check:

  1. Sorting Gridview control on header click with pagination Asp.net.
  2. Gridview row color change based on data asp.net c#.
  3. Gridview row mouseover show detail data in floating div  Asp.net c# jQuery.
  4. Import Excel Sheet Data to Gridview Asp.net C-sharp.

Other Resource:

  1. Drag and Drop GridView Rows using Jquery tableDnD Plugin

Hope you enjoyed this tutorial. If you have any recommendations, please let us know what you think in the comment section below! See you again next time!


Get your Printable Copy

15 COMMENTS

  1. Hi, this looks good.

    I have a query before we actually implement; Does this work on touch screen – If I have a site with such feature then will it also work on tablet/phone?

  2. Nice article, I using this in my dev site and works beautifully. my question though is do the field have to be a boundfield? after I changed to item and edit templates, Request.Form.GetValues(“languageid”) has “nothing” in it???

    • you will face issues with updating Db directly, I am moving to button from direct update, you can use JSON and web services to achieve what you are looking for

  3. not judging or anything but I don’t see a practical value of reordering rows. If you explain how to reorder columns on drag and drop, that’d be much more interesting

  4. Excellent post.
    Very good use of jquery ui sort-able for dragging and reorder the Gridview rows. Can you also provide the Solution file web pages
    thanks

LEAVE A REPLY