Below is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>
  3. <!DOCTYPE html>
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title>Make Grid View Records Moveable in ASP.NET using jQuery</title>
  8. <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
  9. <script src="jquery.tablednd.js" type="text/javascript"></script>
  10. <script type="text/javascript">
  11. $(function () {
  12. $("#gvEmployee").tableDnD();
  13. })
  14. </script>
  15. </head>
  16. <body>
  17. <form id="form1" runat="server">
  18. <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
  19. <tr>
  20. <td style="padding-left: 50px; padding-top: 20px; padding-bottom: 20px; background-color: skyblue; font-size: 20pt; color: orangered;">Move Records in ASP.NET Grid View </td>
  21. </tr>
  22. <tr>
  23. <td style="text-align: left; padding-left: 50px; border: solid 1px red;">
  24. <asp:GridView ID="gvEmployee" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" CellSpacing="4">
  25. <AlternatingRowStyle BackColor="White" />
  26. <EditRowStyle BackColor="#2461BF" />
  27. <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  28. <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" />
  29. <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  30. <RowStyle BackColor="#EFF3FB" Font-Names="Verdana" />
  32. <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  33. <SortedAscendingCellStyle BackColor="#F5F7FB" />
  34. <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  35. <SortedDescendingCellStyle BackColor="#E9EBEF" />
  36. <SortedDescendingHeaderStyle BackColor="#4870BE" />
  37. </asp:GridView>
  38. </td>
  39. </tr>
  41. </table>
  42. </form>
  43. </body>
  44. </html>
My aspx.cs code is:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.UI;
  7. using System.Web.UI.WebControls;
  8. using System.Data.SqlClient;
  10. namespace MoveableRecords
  11. {
  12. public partial class Default : System.Web.UI.Page
  13. {
  14. SqlDataAdapter da;
  15. DataTable dt = new DataTable();
  17. protected void Page_Load(object sender, EventArgs e)
  18. {
  19. if (!Page.IsPostBack)
  20. BindGrid();
  21. }
  23. private void BindGrid()
  24. {
  25. SqlConnection con = new SqlConnection();
  26. con.ConnectionString = @"Server=INDIA\MSSQLServer2k8;database=EmployeeManagement;UID=sa; pwd=india;";
  27. SqlCommand cmd = new SqlCommand("SELECT * FROM EMPLOYEE", con);
  28. da = new SqlDataAdapter(cmd);
  29. da.Fill(dt);
  30. con.Open();
  31. cmd.ExecuteNonQuery();
  32. con.Close();
  34. if (!object.Equals(dt, null))
  35. {
  36. if (dt.Rows.Count > 0)
  37. {
  38. gvEmployee.DataSource = dt;
  39. gvEmployee.DataBind();
  40. }
  41. else
  42. {
  43. gvEmployee.DataSource = null;
  44. gvEmployee.DataBind();
  45. }
  46. }
  47. }
  48. }
  49. }
Now Run your application.



Now Select any records and do drag and drop.



Now,