How to show gridview row details in tooltip using jquery
How to show gridview row details in tooltip using in asp.net? In this article I'm going to explain how to show gridview row details in tool tip using jquery.
How to show gridview row details in tooltip using in asp.net? In this article I'm going to explain how to show gridview row details in tool tip using jquery. Just drag and drop one gridview control from toolbox into your asp.net web page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title>Untitled Page</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() {
$(".gridToolTip").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: 4000;
border: 1px solid #222;
background-color: #EEE18D;
padding: 6px;
opacity: 0.85;
}
#tooltip h3, #tooltip div { margin: 1; }
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:GridView ID="GridView1" AutoGenerateColumns="false" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="Religionid">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridToolTip"><%# Eval("Regionid")%></a>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td style="white-space: nowrap;"><b>Region Name:</b> </td>
<td><%# Eval("RegionName")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Regionid" DataField="Regionid" />
<asp:BoundField HeaderText="ReligionName" DataField="RegionName" />
</Columns>
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
</asp:GridView>
</form>
</body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
DataRow dtrow;
DataTable dtNewTable;
dtNewTable = new DataTable();
DataColumn dtcol, dtcol1;
dtcol = new DataColumn();
dtcol1 = new DataColumn();
dtcol.DataType = System.Type.GetType("System.Int32");
dtcol.ColumnName = "Regionid";
dtNewTable.Columns.Add(dtcol);
dtcol1.DataType = System.Type.GetType("System.String");
dtcol1.ColumnName = "RegionName";
dtNewTable.Columns.Add(dtcol1);
int i;
for (i = 0; i < 4; i++)
{
dtrow = dtNewTable.NewRow();
dtrow["Regionid"] = i;
if (i == 0)
{
dtrow["RegionName"] = "Trichy";
}
else if (i == 1)
{
dtrow["RegionName"] = "Chennai";
}
else if (i == 2)
{
dtrow["RegionName"] = "Bangalore";
}
else
{
dtrow["RegionName"] = "Nothing";
}
dtNewTable.Rows.Add(dtrow);
GridView1.DataSource = dtNewTable;
GridView1.DataBind();
}
}
}
}
Attachments
Hello,
I recently had the same requirement in my project. I tried several ways it was not working as expected. This article was useful. Thanks Dude.
The requirement was not exactly the same. I used your logic to achieve thanks once again