Move Grid View Records using jQuery
In this blog I am going to show how we can move our Grid View rows by drag and drop at run time in asp.net c# using jQuery.
Below is my aspx code:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MoveableRecords.Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Make Grid View Records Moveable in ASP.NET using jQuery</title>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
- <script src="jquery.tablednd.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function () {
- $("#gvEmployee").tableDnD();
- })
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <table style="border: solid 15px blue; width: 100%; vertical-align: central;">
- <tr>
- <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>
- </tr>
- <tr>
- <td style="text-align: left; padding-left: 50px; border: solid 1px red;">
- <asp:GridView ID="gvEmployee" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None" CellSpacing="4">
- <AlternatingRowStyle BackColor="White" />
- <EditRowStyle BackColor="#2461BF" />
- <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
- <HeaderStyle BackColor="#507CD1" Font-Bold="true" ForeColor="White" />
- <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
- <RowStyle BackColor="#EFF3FB" Font-Names="Verdana" />
-
- <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
- <SortedAscendingCellStyle BackColor="#F5F7FB" />
- <SortedAscendingHeaderStyle BackColor="#6D95E1" />
- <SortedDescendingCellStyle BackColor="#E9EBEF" />
- <SortedDescendingHeaderStyle BackColor="#4870BE" />
- </asp:GridView>
- </td>
- </tr>
-
- </table>
- </form>
- </body>
- </html>
My aspx.cs code is:
- using System;
- using System.Collections.Generic;
- using System.Data;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Data.SqlClient;
-
- namespace MoveableRecords
- {
- public partial class Default : System.Web.UI.Page
- {
- SqlDataAdapter da;
- DataTable dt = new DataTable();
-
- protected void Page_Load(object sender, EventArgs e)
- {
- if (!Page.IsPostBack)
- BindGrid();
- }
-
- private void BindGrid()
- {
- SqlConnection con = new SqlConnection();
- con.ConnectionString = @"Server=INDIA\MSSQLServer2k8;database=EmployeeManagement;UID=sa; pwd=india;";
- SqlCommand cmd = new SqlCommand("SELECT * FROM EMPLOYEE", con);
- da = new SqlDataAdapter(cmd);
- da.Fill(dt);
- con.Open();
- cmd.ExecuteNonQuery();
- con.Close();
-
- if (!object.Equals(dt, null))
- {
- if (dt.Rows.Count > 0)
- {
- gvEmployee.DataSource = dt;
- gvEmployee.DataBind();
- }
- else
- {
- gvEmployee.DataSource = null;
- gvEmployee.DataBind();
- }
- }
- }
- }
- }
Now Run your application.
Now Select any records and do drag and drop.
Now,