Drag Drop GridView Rows With JQuery Asp.Net

Posted by Vijay Meghwal

This Example explains How To Implement Drag And Drop GridView Rows Functionality Using JQuery JavaScript In Asp.Net 2.0 3.5 4.0 To Rearrange Row On Client Side.

You need to download and add JQuery and TableDnD plugin in your application.

GridView is populated with Northwind database using SqlDataSource.

Add Script references and css style in head section of page.

   1:  <style type="text/css">
   2:     .highlight
   3:      {
   4:          color : White !important;
   5:          background-color : Teal !important;
   6:      }
   7:  </style>
   8:  <script src="jquery-1.7.1.js" type="text/javascript"/>
   9:  <script src="jquery.tablednd.0.7.min.js" type="text/javascript"/>

Call tableDnD function of drag and drop plugin by passing Gridview Id.

   1:  <script type="text/javascript" language="javascript">
   2:  $(document).ready(function() 
   3:  {
   4:  $("#<%=GridView1.ClientID%>").tableDnD(
   5:              {
   6:                  onDragClass: "highlight"
   7:              });
   8:  });
   9:  </script>
  10:  </head>

   1:  <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
   2:                AutoGenerateColumns="False" DataKeyNames="OrderID" 
   3:                DataSourceID="SqlDataSource1">
   4:  <Columns>
   5:  <asp:BoundField DataField="OrderID" HeaderText="OrderID"/>
   6:  <asp:BoundField DataField="Freight" HeaderText="Freight"/>
   7:  <asp:BoundField DataField="ShipName" HeaderText="ShipName"/>
   8:  <asp:BoundField DataField="ShipCity" HeaderText="ShipCity"/>
   9:  <asp:BoundField DataField="ShipCountry" HeaderText="ShipCountry"/>
  10:  </Columns>
  11:  </asp:GridView>