HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
body {
font-family: Arial;
font-size: 10pt;
}
td {
cursor: pointer;
}
.selected_row {
background-color: #A1DCF2;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=GridView1] td").bind("click", function () {
var row = $(this).parent();
$("[id*=GridView1] tr").each(function () {
if ($(this)[0] != row[0]) {
$("td", this).removeClass("selected_row");
}
});
$("td", row).each(function () {
if (!$(this).hasClass("selected_row")) {
$(this).addClass("selected_row");
} else {
$(this).removeClass("selected_row");
}
});
var secondGridRow = $("[id*=GridView2] tr").eq(row[0].rowIndex);
$("[id*=GridView2] tr").each(function () {
if ($(this)[0] != secondGridRow[0]) {
$("td", this).removeClass("selected_row");
}
});
$("td", secondGridRow).each(function () {
if (!$(this).hasClass("selected_row")) {
$(this).addClass("selected_row");
} else {
$(this).removeClass("selected_row");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<br />
<asp:GridView ID="GridView2" HeaderStyle-BackColor="#000" HeaderStyle-ForeColor="White"
runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="150" />
</Columns>
</asp:GridView>
</form>
</body>
</html>
Namespaces
using System.Data;
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt.Rows.Add(1, "John Hammond", "USA");
dt.Rows.Add(2, "Mudassar Khan", "India");
dt.Rows.Add(3, "Suzanne Mathews", "France");
dt.Rows.Add(4, "Robert Schidner", "UK");
GridView1.DataSource = dt;
GridView1.DataBind();
DataTable dt2 = new DataTable();
dt2.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
dt2.Rows.Add(1, "John Hammond", "USA");
dt2.Rows.Add(2, "Mudassar Khan", "India");
dt2.Rows.Add(3, "Suzanne Mathews", "France");
dt2.Rows.Add(4, "Robert Schidner", "UK");
GridView2.DataSource = dt2;
GridView2.DataBind();
}
}
Screenshot:
