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.

  • 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;
    }
   
}


Comments

  1. Hi

    your 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.

    ReplyDelete
    Replies
    1. 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

      Delete
    2. It works for me....thanks for the example

      Delete
    3. Thank for the example..its working

      Delete
  2. I am not getting error in console but my hover or tooltip event is not triggering/firing

    I have added the js files and jquery file to your solution


    ReplyDelete

Post a Comment

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image