In this article I will show you how you can Drag Drop Cells
in GirdView Control Using Asp.net C# and jQuery.
So some of my previous articles are as follows: How To Make a Single Row of DataGridview Bold Using C#.Net in Windows Application, Code to Export GridView to PDF in Asp.Net Using C# and Vb.Net, Bind DataGridView In Windows Application Using C#, Binding Gridview By Access DataBase Using C#.Net in Asp.Net.
Now for this article first we will create a new asp.net application
and add required controls in it.
|
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="draganddropgridvirecell.aspx.cs"
Inherits="ProjectDemo_Asp.et.draganddropgridvirecell"
%>
<!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">
<title>Drag
Drop Cells in GirdView Control Using Asp.net C# and jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"
/>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function
() {
$("#GridView1").find("td").draggable({ revert: "valid", cursor: "move" });
$("#GridView1").find("td").droppable({
drop: function (event, ui) {
$(this).html($(ui.draggable).html());
}
});
})
</script>
<style>
#GridView1
td
{
cursor:
move;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" EmptyDataText="There are no data records to display."
BorderStyle="Solid">
<Columns>
<asp:BoundField DataField="author_name" HeaderText="NAME" />
<asp:BoundField DataField="publisher_name" HeaderText="PUBLISHER NAME"
/>
<asp:BoundField DataField="publication_year" HeaderText="PUBLISH
YEAR" />
<asp:BoundField DataField="retail_price" HeaderText="PRICE" />
</Columns>
<HeaderStyle BackColor="#66CCFF" />
</asp:GridView>
</div>
</form>
</body>
</html>
|
In above code I have used jquery drag able attribute for this
article
|
<script>
$(function
() {
$("#GridView1").find("td").draggable({ revert: "valid", cursor: "move" });
$("#GridView1").find("td").droppable({
drop: function (event, ui) {
$(this).html($(ui.draggable).html());
}
});
})
</script>
|
Now bind the grid view and check the output.
About the Author
0 comments:
Please let me know your view