This way
HTML
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Id" ItemStyle-CssClass="Id" HeaderText="Id" ItemStyle-Width="30" />
<asp:BoundField DataField="Name" ItemStyle-CssClass="Name" HeaderText="Name" ItemStyle-Width="150" />
<asp:BoundField DataField="Description" ItemStyle-CssClass="Description" HeaderText="Description"
ItemStyle-Width="150" />
</Columns>
</asp:GridView>
<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*=GridView] td").click(function () {
var message = "";
message += "Id: " + $("td", $(this).closest("tr")).eq(0).html();
message += "\nName: " + $("td", $(this).closest("tr")).eq(1).html();
message += "\nDescription: " + $("td", $(this).closest("tr")).eq(2).html();
alert(message);
});
});
</script>
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", typeof(int)),
new DataColumn("Name", typeof(string)),
new DataColumn("Description",typeof(string)) });
dt.Rows.Add(1, "John Hammond", "Works as a scientist in USA.");
dt.Rows.Add(2, "Mudassar Khan", "ASP.Net programmer and consultant in India.");
dt.Rows.Add(3, "Suzanne Mathews", "Content Writer in France.");
dt.Rows.Add(4, "Robert Schidner", "Wild life photographer in Russia.");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
Demo
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
border-collapse: collapse;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border: 1px solid #ccc;
}
</style>
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
<tr>
<th scope="col">Id</th><th scope="col">Name</th><th scope="col">Description</th>
</tr><tr>
<td class="Id" style="width:30px;">1</td><td class="Name" style="width:150px;">John Hammond</td><td class="Description" style="width:150px;">Works as a scientist in USA.</td>
</tr><tr>
<td class="Id" style="width:30px;">2</td><td class="Name" style="width:150px;">Mudassar Khan</td><td class="Description" style="width:150px;">ASP.Net programmer and consultant in India.</td>
</tr><tr>
<td class="Id" style="width:30px;">3</td><td class="Name" style="width:150px;">Suzanne Mathews</td><td class="Description" style="width:150px;">Content Writer in France.</td>
</tr><tr>
<td class="Id" style="width:30px;">4</td><td class="Name" style="width:150px;">Robert Schidner</td><td class="Description" style="width:150px;">Wild life photographer in Russia.</td>
</tr>
</table>
</div>
<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*=GridView] td").click(function () {
var message = "";
message += "Id: " + $("td", $(this).closest("tr")).eq(0).html();
message += "\nName: " + $("td", $(this).closest("tr")).eq(1).html();
message += "\nDescription: " + $("td", $(this).closest("tr")).eq(2).html();
alert(message);
});
});
</script>
Demo
Demo
