Designer Source Code:
<html xmlns="http://www.w3.org/1999/xhtml">
If you observe in
header section I added jQuery plugin and tooltip plugin by using those files we can display gridview row details in
tooltip. To get those files download attached sample code or from this url
Code Behind:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Gridview Rows Details in tooltip with jQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="jquery.tooltip.min.js" type="text/javascript"></script>
<script type="text/javascript">
function InitializeToolTip() {
$(".gridViewToolTip").tooltip({
track: true,
delay:
0,
showURL: false,
fade:
100,
bodyHandler: function ()
{
return $($(this).next().html());
},
showURL: false
});
}
</script>
<script type="text/javascript">
$(function ()
{
InitializeToolTip();
})
</script>
<style type="text/css">
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEE18D;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" AutoGenerateColumns="false" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="UserId">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip"><%# Eval("UserId")%></a>
<div id="tooltip" style="display:
none;">
<table>
<tr>
<td style="white-space:
nowrap;"><b>UserName:</b> </td>
<td><%# Eval("UserName")%></td>
</tr>
<tr>
<td style="white-space:
nowrap;"><b>Education:</b> </td>
<td><%# Eval("Education")%></td>
</tr>
<tr>
<td style="white-space:
nowrap;"><b>Location:</b> </td>
<td><%# Eval("Location")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="UserName" DataField="UserName" />
<asp:BoundField HeaderText="Education" DataField="Education" />
<asp:BoundField HeaderText="Location" DataField="Location" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
DataTable dt
= new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("UserName", typeof(string));
dt.Columns.Add("Education", typeof(string));
dt.Columns.Add("Location", typeof(string));
DataRow dtrow =
dt.NewRow(); // Create New Row
dtrow["UserId"] =
1; //Bind Data to Columns
dtrow["UserName"]
= "SureshDasari";
dtrow["Education"]
= "B.Tech";
dtrow["Location"]
= "Chennai";
dt.Rows.Add(dtrow);
dtrow
=
dt.NewRow(); // Create New
Row
dtrow["UserId"] =
2; //Bind Data to Columns
dtrow["UserName"]
= "MadhavSai";
dtrow["Education"]
= "MBA";
dtrow["Location"]
= "Nagpur";
dt.Rows.Add(dtrow);
dtrow
=
dt.NewRow(); // Create New
Row
dtrow["UserId"] =
3; //Bind Data to Columns
dtrow["UserName"]
= "MaheshDasari";
dtrow["Education"]
= "B.Tech";
dtrow["Location"]
= "Nuzividu";
dt.Rows.Add(dtrow);
gvDetails.DataSource
= dt;
gvDetails.DataBind();
}
No comments:
Post a Comment