Description:
In some
scenario, you may need to display the overview of the complete gridview row on
tooltip.
If there
are lot of columns in the gridview the user may find it difficult to scroll the
page and view the details of the entire gridview row.
To overcome
this, we are adding tooltip with the link button that will retrieve the entire
gridview row data and it will display overview of the single record at a time.
To include
Jquery tooltip with gridview row,
1. Download the
Jquery Tooltip Plugin from the following url.
2. If you want
to use jquery 1.9+ versions, you need to have jquery migrate plugin.
<script type="text/javascript"
src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
3. Include the
files jquery.tooltip.js and jquery.tooltip.css.
<script src="jquery.tooltip.js"
type="text/javascript"></script>
<link href="jquery.tooltip.css"
rel="stylesheet"
type="text/css"
/>
4. Once the
document is ready, initialize the tooltip plugin.
$(document).ready(function () {
$(".GridViewClass").tooltip();
});
Example program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script
src="jquery-1.10.2.js"
type="text/javascript"></script>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script
src="jquery.tooltip.js"
type="text/javascript"></script>
<link
href="jquery.tooltip.css"
rel="stylesheet"
type="text/css"
/>
<script
type="text/javascript">
$(document).ready(function () {
$(".grdEmployeeDetailsToolTip").tooltip({
track: true,
showURL: true,
fade: 100,
bodyHandler: function () {
return
$($(this).next().html());
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<asp:GridView ID="grdEmployeeDetails" runat="server"
AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<a href="http://www.jqueryjohn.com/" class="grdEmployeeDetailsToolTip"
style="text-decoration:
none">Get Row
Details </a>
<div id="ToolTipDetails" style="display: none;">
<table style="width: 100%">
<tr>
<td style="width: 50%">
<b>Age:</b>
</td>
<td style="width: 50%">
<%# Eval("Age")%>
</td>
</tr>
<tr>
<td style="width: 50%">
<b>Sex:</b>
</td>
<td style="width: 50%">
<%#
Eval("Sex")%>
</td>
</tr>
<tr>
<td style="width: 50%">
<b>EMail:</b>
</td>
<td style="width: 50%">
<%# Eval("Email")%>
</td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Age" HeaderText="Age" />
<asp:BoundField DataField="Sex" HeaderText="Sex" />
<asp:BoundField DataField="Email" HeaderText="EMail" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
The above
program used to display the gridview row details on tooltip using JQuery.
Show gridview row details on tooltip , How to display
gridview row details on tooltip using Jquery , Display
GridView Row details on MouseOver using jQuery , Display row details
ToolTip on GridView row using jQuery, How to display information of
GridView Row Records in Tooltip in ASP.Net, ToolTip In GridView Using
jQuery,Gridview Row Tooltip
0 comments:
Post a Comment