In this article I am going to show how we can move our
Grid View rows by drag n 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:
Image 1.
Now Select any records and do drag and drop.
Image 2.
Image 3.