Drag and Drop Gridview Row to Another GridView Row or DetailsView
One Gridview row Move To Another GridView row Display as well as Detailsview Using JQuery Asp.Net C#.
Download Coding
Download
DEMO
HTML CODING
C# CODING
One Gridview row Move To Another GridView row Display as well as Detailsview Using JQuery Asp.Net C#.
Download Coding
Download
DEMO
HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<style type="text/css">
.row
{
background-color:hotpink;
border: 3px solid #ffba00;
color:Black;
}
.row td
{
cursor:move;
font-weight:bold;
}
</style>
<title>Drag & Drop GridView To Another GridView Using Jquery</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.24.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var droppedItemIndex = -1;
$('.block').draggable({
helper: "clone",
cursor: "move"
});
$('#<%=GridView2.ClientID %>').droppable({
drop: function (ev, ui) {
accept: '.block',
droppedItemIndex = $(ui.draggable).index();
var droppedItem = $(".gridSrc tr").eq(droppedItemIndex);
index = -1;
$("[id*=GridView2] .name").html(droppedItem.find(".name").html());
$("[id*=GridView2] .designation").html(droppedItem.find(".designation").html());
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table >
<tr>
<td>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
onrowcreated="GridView1_RowCreated" CssClass="gridSrc" >
<SelectedRowStyle CssClass="block row" />
<RowStyle CssClass="block" />
<HeaderStyle CssClass="grd1-header" />
<Columns>
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-CssClass="name" >
<ItemStyle CssClass="name"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="designation" HeaderText="Designation" ItemStyle-CssClass="designation" >
<ItemStyle CssClass="designation"></ItemStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
</td>
<td >
<asp:GridView ID="GridView2" Height="50px" Width="125px" runat="server" AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField HeaderText="Name" ItemStyle-CssClass="name">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("name") %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="name"></ItemStyle>
</asp:TemplateField>
<asp:TemplateField HeaderText="Designation">
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("designation") %>'></asp:Label>
</ItemTemplate>
<ItemStyle CssClass="designation"></itemstyle>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from reg", con);
SqlDataAdapter dAdapter = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
dAdapter.Fill(ds);
if (ds.Tables[0].Rows.Count > 0)
{
GridView1.DataSource = ds.Tables[0];
GridView1.DataBind();
}
DataTable dt = new DataTable();
ds.Tables[0].Clear();
dt = ds.Tables[0];
dt.Rows.Add();
GridView2.DataSource = dt;
GridView2.DataBind();
}
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='row'");
e.Row.Attributes.Add("onmouseout", "this.className='block'");
}
}
}
0 comments:
Post a Comment