Description:-
Before
sometime we already explain that how to Display Gridview rowdetails in Tooltip
when mouse is over on each Gridview record using Display Tooltip using javascript javascript.but now in this
example we explain that same thing but difference is that we can here use Jquery
instead of javascript.
To do this first we have to added jQuery plugin and tooltip plugin by using those files we can display gridview row
details in tooltip. or To download
attached sample code or from this url bassistance.de tooltip plugin
Here
is Jquery code for display Gridview Detail in Tooltip when mouse is over
$(".gridViewToolTip").tooltip({
track: true,
delay: 0,
showURL: false,
fade: 100,
bodyHandler: function () {
return $($(this).next().html());
},
showURL: false
});
And
css for the Tooltip because of display the Tooltip directally below the Below
the cursor are as follows
#tooltip {
position: absolute;
z-index: 3000;
border: 1px solid #111;
background-color: #FEE18D;
padding: 5px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
Redirect to the other .aspx page using javascript client side redirection using javascript
how to create thumbnails of the image in asp.net Create or generate thumbnails of the image
Bind Dynamic data to Ajax Accordion Panel Bind Accordion Panel from database
ShowGridviewRowsDatainTooltip.aspx:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="gridviewdetailintooltip.aspx.cs" Inherits="gridviewdetailintooltip" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="4" runat="server" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="UserId">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip"><%# Eval("Id")%></a>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td style="white-space: nowrap;"><b>Name:</b> </td>
<td><%# Eval("Name")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Age:</b> </td>
<td><%# Eval("Age")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Gender:</b> </td>
<td><%# Eval("Gender")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Name" DataField="Name" />
<asp:BoundField HeaderText="Age" DataField="Age" />
<asp:BoundField HeaderText="Gender" DataField="Gender" />
</Columns>
<FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#990000" Font-Bold="true" ForeColor="White" />
<PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" />
<RowStyle BackColor="#FFFBD6" ForeColor="#333333" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<SortedAscendingCellStyle BackColor="#FDF5AC" />
<SortedAscendingHeaderStyle BackColor="#4D0000" />
<SortedDescendingCellStyle BackColor="#FCF6C0" />
<SortedDescendingHeaderStyle BackColor="#820000" />
</asp:GridView>
</div>
</form>
</body>
</html>
ShowGridviewRowsDatainTooltip.aspx.cs:-
using
System;
using
System.Data;
using
System.Data.SqlClient;
using
System.Web.UI.WebControls;
public partial class gridviewdetailintooltip : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if (!IsPostBack)
{
Binddata(); //call function to fetch data
}
}
protected void Binddata()
{
DataTable newrow = new DataTable();
newrow.Columns.Add("Id", typeof(Int32));
newrow.Columns.Add("Name", typeof(string));
newrow.Columns.Add("Age", typeof(int));
newrow.Columns.Add("Gender", typeof(string));
DataRow dtrow = newrow.NewRow(); // Create New Row
dtrow["Id"] = 1; //Bind Data to Columns
dtrow["Name"] = "kirit kapupara";
dtrow["Age"] = "24";
dtrow["Gender"] = "Male";
newrow.Rows.Add(dtrow);
dtrow =
newrow.NewRow(); // Create New Row
dtrow["Id"] = 2; //Bind Data to Columns
dtrow["Name"] = "Pintu";
dtrow["Age"] = "25";
dtrow["Gender"] = "Male";
newrow.Rows.Add(dtrow);
dtrow =
newrow.NewRow(); // Create New Row
dtrow["Id"] = 2; //Bind Data to Columns
dtrow["Name"] = "priti";
dtrow["Age"] = "22";
dtrow["Gender"] = "Female";
newrow.Rows.Add(dtrow);
gvDetails.DataSource = newrow;
gvDetails.DataBind();
}
} 
0 comments:
Post a Comment