HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/start/jquery-ui.css" rel="stylesheet"
type="text/css" />
<script type="text/javascript">
$("[id*=lnkSelect]").live("click", function () {
debugger;
$("#item").html($(".Item", $(this).closest("tr")).html());
$("#price").html($(".Price", $(this).closest("tr")).val());
$("#dialog").dialog({
title: "Selected Row",
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" ItemStyle-CssClass="Item" />
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:TextBox ID="txtPrice" CssClass="Price" runat="server" Text='<%# Eval("Price") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkSelect" runat="server" Text="Select"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="dialog" style="display: none">
Item:<span id="item"></span><br />
Price:<span id="price"></span>
</div>
</form>
</body>
</html>
Code
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);
dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<title>Untitled Page </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.24/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://code.jquery.com/ui/1.8.24/themes/start/jquery-ui.css" rel="stylesheet"
type="text/css" />
<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>
<script type="text/javascript">
$("[id*=lnkSelect]").live("click", function () {
debugger;
$("#item").html($(".Item", $(this).closest("tr")).html());
$("#price").html($(".Price", $(this).closest("tr")).val());
$("#dialog").dialog({
title: "Selected Row",
buttons: {
Ok: function () {
$(this).dialog('close');
}
}
});
return false;
});
</script>
</head>
<body>
<div>
<table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse: collapse;">
<tr>
<th scope="col">
Item
</th>
<th scope="col">
Price
</th>
<th scope="col">
</th>
</tr>
<tr>
<td class="Item">
Shirt
</td>
<td>
<input name="GridView1$ctl02$txtPrice" type="text" value="200" id="GridView1_txtPrice_0"
class="Price" />
</td>
<td>
<a id="GridView1_lnkSelect_0" href="javascript:__doPostBack('GridView1$ctl02$lnkSelect','')">
Select</a>
</td>
</tr>
<tr>
<td class="Item">
Football
</td>
<td>
<input name="GridView1$ctl03$txtPrice" type="text" value="30" id="GridView1_txtPrice_1"
class="Price" />
</td>
<td>
<a id="GridView1_lnkSelect_1" href="javascript:__doPostBack('GridView1$ctl03$lnkSelect','')">
Select</a>
</td>
</tr>
<tr>
<td class="Item">
Bat
</td>
<td>
<input name="GridView1$ctl04$txtPrice" type="text" value="22.5" id="GridView1_txtPrice_2"
class="Price" />
</td>
<td>
<a id="GridView1_lnkSelect_2" href="javascript:__doPostBack('GridView1$ctl04$lnkSelect','')">
Select</a>
</td>
</tr>
</table>
</div>
<div id="dialog" style="display: none">
Item:<span id="item"></span><br />
Price:<span id="price"></span>
</div>
</body>
</html>
Demo