Drag and Drop GridView Row with jQuery.
Save Display Order in DataBase with WebMethod.
nodrag and nodrop for row that you are not want to drag and drop
GridViewReOrderDragandDrop.aspx
<%@ Page Language="C#" CodeFile="GridViewReOrderDragandDrop.aspx.cs"
AutoEventWireup="true" Inherits="GridViewReOrderDragandDrop" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="jquery-1.6.1.js" type="text/javascript"></script>
<script src="jquery.tablednd_0_5.js" type="text/javascript"></script>
<style>
.noselect
{
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
cursor: move;
}
.tDnD_whileDrag
{
background-color: Lime;
}
</style>
<title>ASPdotNET-Example.blogspot.com</title>
<script type="text/javascript">
var strorder;
$(document).ready(function() {
$('#GridViewReorder').tableDnD(
{
onDrop: function(table, row) {
reorder();
$.ajax({
type: "POST",
url: "GridViewReOrderDragandDrop.aspx/GridViewReorders",
data: '{"Reorder":"'+strorder+'"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (msg) {
alert("Successfully Save ReOrder");
}
})
}
}
);
});
function reorder()
{
strorder="";
var totalid=$('#GridViewReorder tr td input').length;
for(var i=0;i<totalid;i++)
{
strorder=strorder+$('#GridViewReorder tr td input')[i].getAttribute("value")+"|";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<center>
<h1>GridView Reorder Drag And Drop</h1>
<div>
<asp:GridView ID="GridViewReorder" runat="server" HeaderStyle-CssClass="nodrag nodrop"
AutoGenerateColumns="False">
<Columns>
<asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="ID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Bind("id") %>'></asp:Label>
<asp:HiddenField ID="hdnid" runat="server" Visible="true" Value='<%# Bind("id") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-CssClass="noselect" HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Bind("name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Display Order" ItemStyle-CssClass="noselect">
<ItemTemplate>
<asp:Label ID="lblOrder" runat="server" Text='<%# Bind("displayorder") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<h1> ASPdotNet-Example.blogspot.com</h1>
</center>
</form>
</body>
</html>
GridViewReOrderDragandDrop.aspx.cs
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.Services;
public partial class GridViewReOrderDragandDrop : System.Web.UI.Page
{
SqlConnection strCon;
string sql;
SqlDataAdapter objAd;
DataSet objDs;
protected void Page_Load(object sender, EventArgs e)
{
GridViewReorder.DataSource = Con();
GridViewReorder.DataBind();
}
protected DataSet Con()
{
strCon = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
objAd = new SqlDataAdapter("ListGrid", strCon);
objDs = new DataSet();
objAd.Fill(objDs);
return objDs;
}
[WebMethod]
public static void GridViewReorders(string Reorder)
{
string[] ListID = Reorder.Split('|');
for (int i = 0; i < ListID.Length; i++)
{
if (ListID[i] != "" && ListID[i] !=null)
{
updateGridViewReorder(Convert.ToInt16(ListID[i]), i+1);
}
}
}
public static void updateGridViewReorder(int id, int DisplayOrder)
{SqlConnection con ;
con= new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
SqlCommand cmd = new SqlCommand("UpdateOrder");
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@id", id);
cmd.Parameters.AddWithValue("@DisplayOrder",DisplayOrder);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
Database Script
