Bind image in gridview and Show image on Hover over specific column in GridView (Show image as ToolTip on Mouseover in GridView) in Asp.Net C#
In this blog, I am going to show how to bind images in gridview and show this image on mouseover over any link/ image
Here, i have have shown how a image can be used as a tooltip in gridview.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewToolTipaspx.aspx.cs" Inherits="GridViewToolTipaspx" %>
<!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 runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/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: #FEFFFF;
padding: 5px;
opacity: 1.55;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" AllowSorting="true" AutoGenerateColumns="false" OnSorting="SortRecords" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="Show Image">
<ItemStyle Width="90px" HorizontalAlign="Center" />
<ItemTemplate>
<%--Image added simply for good look, you may add any control here with class name mandatory--%>
<asp:Image ID="Image1" Width="20px" Height="20px" runat="server" class="gridViewToolTip" ImageUrl="~/images/large/camera_lens.png" />
<div id="tooltip" style="display: none;">
<table>
<tr>
<%--Provide column name of image to be shown as tooltip--%>
<td><asp:Image ID="imgUserName" Width="150px" Height="120px" ImageUrl='<%#Eval("Image") %>' runat="server" /></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<%--Bind column to gridview --%>
<asp:BoundField HeaderText="UserName" DataField="Name" />
<asp:BoundField HeaderText="Designation" DataField="Designation" />
<asp:BoundField HeaderText="Department" DataField="Department" />
</Columns>
<HeaderStyle BackColor="#CCCCCC" Font-Bold="true" ForeColor="Black" />
</asp:GridView>
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
public partial class GridViewToolTipaspx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
gvDetails.DataSource = this.getData();
gvDetails.DataBind();
}
private DataTable getData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Designation", typeof(string));
dt.Columns.Add("Department", typeof(string));
dt.Columns.Add("Image", typeof(string));
DataRow dr = dt.NewRow();
dr["UserId"] = 101;
dr["Name"] = "Zaheer";
dr["Designation"] = "Associate Technical Consultant";
dr["Department"] = ".Net";
dr["Image"] = "images/large/image1.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 12;
dr["Name"] = "Anish";
dr["Designation"] = "Technical Consultant";
dr["Department"] = "CRM";
dr["Image"] = "images/large/image2.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 113;
dr["Name"] = "Manish";
dr["Designation"] = "Navision Consultant";
dr["Department"] = "Navision";
dr["Image"] = "images/large/image3.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 4;
dr["Name"] = "Ravish";
dr["Designation"] = "Tech Lead";
dr["Department"] = "CRM";
dr["Image"] = "images/large/image4.jpg";
dt.Rows.Add(dr);
for (int i = 0; i < dt.Rows.Count; i++)
{
for (int j = 0; j < dt.Columns.Count; j++)
{
if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
{
dt.Rows[i][j] = "Data Not Available";
}
}
}
return dt;
}
}
Here, i have have shown how a image can be used as a tooltip in gridview.
- First of all, Write the below code in .aspx page and don't forgot to add "jquery.tooltip.min.js" and "jquery-1.8.2.js" to your solution. Just search it on google and you will get this .js file easily
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridViewToolTipaspx.aspx.cs" Inherits="GridViewToolTipaspx" %>
<!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 runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/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: #FEFFFF;
padding: 5px;
opacity: 1.55;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvDetails" AllowSorting="true" AutoGenerateColumns="false" OnSorting="SortRecords" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="Show Image">
<ItemStyle Width="90px" HorizontalAlign="Center" />
<ItemTemplate>
<%--Image added simply for good look, you may add any control here with class name mandatory--%>
<asp:Image ID="Image1" Width="20px" Height="20px" runat="server" class="gridViewToolTip" ImageUrl="~/images/large/camera_lens.png" />
<div id="tooltip" style="display: none;">
<table>
<tr>
<%--Provide column name of image to be shown as tooltip--%>
<td><asp:Image ID="imgUserName" Width="150px" Height="120px" ImageUrl='<%#Eval("Image") %>' runat="server" /></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<%--Bind column to gridview --%>
<asp:BoundField HeaderText="UserName" DataField="Name" />
<asp:BoundField HeaderText="Designation" DataField="Designation" />
<asp:BoundField HeaderText="Department" DataField="Department" />
</Columns>
<HeaderStyle BackColor="#CCCCCC" Font-Bold="true" ForeColor="Black" />
</asp:GridView>
</div>
</form>
</body>
</html>
- Now put the below code in .cs ::
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.IO;
public partial class GridViewToolTipaspx : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
private void BindData()
{
gvDetails.DataSource = this.getData();
gvDetails.DataBind();
}
private DataTable getData()
{
DataTable dt = new DataTable();
dt.Columns.Add("UserId", typeof(Int32));
dt.Columns.Add("Name", typeof(string));
dt.Columns.Add("Designation", typeof(string));
dt.Columns.Add("Department", typeof(string));
dt.Columns.Add("Image", typeof(string));
DataRow dr = dt.NewRow();
dr["UserId"] = 101;
dr["Name"] = "Zaheer";
dr["Designation"] = "Associate Technical Consultant";
dr["Department"] = ".Net";
dr["Image"] = "images/large/image1.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 12;
dr["Name"] = "Anish";
dr["Designation"] = "Technical Consultant";
dr["Department"] = "CRM";
dr["Image"] = "images/large/image2.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 113;
dr["Name"] = "Manish";
dr["Designation"] = "Navision Consultant";
dr["Department"] = "Navision";
dr["Image"] = "images/large/image3.jpg";
dt.Rows.Add(dr);
dr = dt.NewRow();
dr["UserId"] = 4;
dr["Name"] = "Ravish";
dr["Designation"] = "Tech Lead";
dr["Department"] = "CRM";
dr["Image"] = "images/large/image4.jpg";
dt.Rows.Add(dr);
for (int i = 0; i < dt.Rows.Count; i++)
{
for (int j = 0; j < dt.Columns.Count; j++)
{
if (string.IsNullOrEmpty(dt.Rows[i][j].ToString()))
{
dt.Rows[i][j] = "Data Not Available";
}
}
}
return dt;
}
}
Hi
ReplyDeleteyour code dosnt work. in VS i get message that the class is not valid id. and in my gridview it add the pocture in new table rather then open as hoverover.
any idea. ?
i just have copied your code over,
reply me at riz@riz.no. thanks.
Have you added the js files and jquery file to your solution...???... And don't copy the whole code... Just copy the main region... I think you are getting error at the first line after name space.. Post your error images or tell more clear at which position you are getting these errors
DeleteIt works for me....thanks for the example
DeleteThank for the example..its working
DeleteI am not getting error in console but my hover or tooltip event is not triggering/firing
ReplyDeleteI have added the js files and jquery file to your solution