Description:-
In this Example I will explain how we can Drag Rows from one
Source GridView and then drop it in another Destination GridView in ASP.Net
using jQuery.
Here we use the Jquery to simply select the row and
drag it from one gridview to another gridview simply same like we drag the
menuitem from List Control.
Here is a code of Jquery are as follows :
<script type="text/javascript">
$(function () {
$(".drag_drop_grid").sortable({
items: 'tr:not(tr:first-child)',
cursor: 'crosshair',
connectWith: '.drag_drop_grid',
axis: 'y',
dropOnEmpty: true,
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
$("[id*=gvDest]
tr:not(tr:first-child)").remove();
});
</script>
Look the above code we simply use the two method of
Jquery are Append and Remove for Add and Remove item from Gridview.
to show Example of How to Upload File to Database and bind to Gridview Uplaod File and Bind to gridview
How to Read and write File in Asp.Net Read and Write File
To Create Nested Gridview in Asp.Net click here Nested Gridview example Example
DragDrop.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DragDrop.aspx.cs" Inherits="DragDrop" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script type="text/javascript">
$(function () {
$(".drag_drop_grid").sortable({
items: 'tr:not(tr:first-child)',
cursor:
'crosshair',
connectWith: '.drag_drop_grid',
axis: 'y',
dropOnEmpty: true,
receive: function (e, ui) {
$(this).find("tbody").append(ui.item);
}
});
$("[id*=gvDest]
tr:not(tr:first-child)").remove();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" CssClass="drag_drop_grid
GridSrc" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" />
</Columns>
<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" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
</asp:GridView>
<br />
<asp:GridView ID="GridView2" runat="server" CssClass="drag_drop_grid
GridDest" AutoGenerateColumns="False" BackColor="White" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Horizontal">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" />
</Columns>
<FooterStyle BackColor="#CCCC99" ForeColor="Black" />
<HeaderStyle BackColor="#333333" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="Black" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#CC3333" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
DragDrop.aspx.cs:-
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
System.Data;
public partial class DragDrop :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2]
{ new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
GridView1.DataSource = dt;
GridView1.DataBind();
dt.Rows.Clear();
dt.Rows.Add("Bat", 22.5);
GridView2.DataSource = dt;
GridView2.DataBind();
}
}
}
0 comments:
Post a Comment