Please refer this code.
I have used the Dummy DataTable to bind the GridViews.
Second GridView is bound with null to show the empty Data Templete.
HTML
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false" Width="330">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="cbCheck" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<br />
<br />
<asp:GridView ID="GridView2" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<EmptyDataTemplate>
<table border="0" cellpadding="0" cellspacing="0" width="325px">
<tr style="color: White; background-color: #3AC0F2;">
<th scope="col">
Id
</th>
<th scope="col">
Name
</th>
<th scope="col">
Country
</th>
</tr>
<tr class="emptyTd">
<td style="width: 30px; text-align: center" colspan="3">
No Records found
</td>
</tr>
</table>
</EmptyDataTemplate>
</asp:GridView>
Namespaces
using System.Data;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Country",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "United States");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "Russia");
GridView1.DataSource = dt;
GridView1.DataBind();
GridView2.DataSource = null;
GridView2.DataBind();
}
}
jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var temprow = $('[id*=GridView2] table tbody').find(".emptyTd");
$('[id*=cbCheck]').change(function () {
var checkbox = $(this);
if ($(this).is(":checked")) {
var row = $(this).parent().closest('tr');
var temp = $(row).clone(true);
$('[id*=GridView1] tbody').append(temp);
$('[id*=GridView2] table tbody').find(".emptyTd").remove();
$(row).find("td:first").remove();
$('[id*=GridView2] table tbody').append(row);
}
else {
$('[id*=GridView2] table tbody tr').each(function () {
if ($(this).find("td:first").html() == $(checkbox).parent().closest('tr').find("td:nth-child(2)").html()) {
$(this).remove();
if ($('[id*=GridView2] table tbody').has('td').length == 0) {
$('[id*=GridView2] table tbody').append(temprow);
}
}
});
}
});
});
</script>
HTML DEMO
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
</style>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var temprow = $('[id*=GridView2] table tbody').find(".emptyTd");
$('[id*=cbCheck]').change(function () {
var checkbox = $(this);
if ($(this).is(":checked")) {
var row = $(this).parent().closest('tr');
var temp = $(row).clone(true);
$('[id*=GridView1] tbody').append(temp);
$('[id*=GridView2] table tbody').find(".emptyTd").remove();
$(row).find("td:first").remove();
$('[id*=GridView2] table tbody').append(row);
}
else {
$('[id*=GridView2] table tbody tr').each(function () {
if ($(this).find("td:first").html() == $(checkbox).parent().closest('tr').find("td:nth-child(2)").html()) {
$(this).remove();
if ($('[id*=GridView2] table tbody').has('td').length == 0) {
$('[id*=GridView2] table tbody').append(temprow);
}
}
});
}
});
});
</script>
</head>
<body>
<div>
<table style="width: 330px; border-collapse: collapse" id="GridView1" border="1"
rules="all" cellspacing="0">
<tbody>
<tr style="background-color: #3ac0f2; color: white">
<th scope="col">
</th>
<th scope="col">
Id
</th>
<th scope="col">
Name
</th>
<th scope="col">
Country
</th>
</tr>
<tr>
<td>
<input id="GridView1_cbCheck_0" type="checkbox" name="GridView1$ctl02$cbCheck">
</td>
<td style="width: 30px">
1
</td>
<td style="width: 150px">
John Hammond
</td>
<td style="width: 150px">
United States
</td>
</tr>
<tr>
<td>
<input id="GridView1_cbCheck_1" type="checkbox" name="GridView1$ctl03$cbCheck">
</td>
<td style="width: 30px">
2
</td>
<td style="width: 150px">
Mudassar Khan
</td>
<td style="width: 150px">
India
</td>
</tr>
<tr>
<td>
<input id="GridView1_cbCheck_2" type="checkbox" name="GridView1$ctl04$cbCheck">
</td>
<td style="width: 30px">
3
</td>
<td style="width: 150px">
Suzanne Mathews
</td>
<td style="width: 150px">
France
</td>
</tr>
<tr>
<td>
<input id="GridView1_cbCheck_3" type="checkbox" name="GridView1$ctl05$cbCheck">
</td>
<td style="width: 30px">
4
</td>
<td style="width: 150px">
Robert Schidner
</td>
<td style="width: 150px">
Russia
</td>
</tr>
</tbody>
</table>
</div>
<br>
<br>
<div>
<table style="border-collapse: collapse" id="GridView2" border="1" rules="all" cellspacing="0">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" width="325">
<tbody>
<tr style="background-color: #3ac0f2; color: white">
<th scope="col">
Id
</th>
<th scope="col">
Name
</th>
<th scope="col">
Country
</th>
</tr>
<tr class="emptyTd">
<td style="text-align: center; width: 30px" colspan="3">
No Records found
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Demo