Post
Ask Question

Move Grid View Records using jQuery

Below is my aspx code:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  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" />  
  31.                          
  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>  
  40.   
  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;  
  9.   
  10. namespace MoveableRecords  
  11. {  
  12.     public partial class Default : System.Web.UI.Page  
  13.     {  
  14.         SqlDataAdapter da;  
  15.         DataTable dt = new DataTable();  
  16.   
  17.         protected void Page_Load(object sender, EventArgs e)  
  18.         {  
  19.             if (!Page.IsPostBack)  
  20.                 BindGrid();  
  21.         }  
  22.   
  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();  
  33.   
  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,

 
Next Recommended Reading Insert data in Grid View without using database