Drag Drop GridView Rows With JQuery Asp.Net

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>

Build and run the code.

Tweet

If you like this post than join us or share