Show GridView row details in tooltip on mouseover with jQuery using asp.net inside GridView in c#

In this blog i am going to explain how to show gridview row details in tooltip on mouseover with jQuery using asp.net in C#


  • First of all in the design page(.aspx) write place Gridview as following::


<%@ 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: 0.85;
}
#tooltip h3, #tooltip div { margin: 0; }
</style>
</head>
<body>
    <form id="form1" runat="server">
   <div>
<asp:GridView ID="gvDetails" AutoGenerateColumns="false" CellPadding="5" runat="server">
<Columns>
<asp:TemplateField HeaderText="UserId">
<ItemStyle Width="30px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="gridViewToolTip"><%# Eval("UserId")%></a>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td>
<td><%# Eval("Name")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Designation:</b>&nbsp;</td>
<td><%# Eval("Designation")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Department:</b>&nbsp;</td>
<td><%# Eval("Department")%></td>
</tr>
<tr>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
<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, in the code behind file(.aspx.cs) write the code as ::

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)
        {
            BindGrid();
        }
    }
    protected void BindGrid()
    {

        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));

        DataRow dr = dt.NewRow();
        dr["UserId"] = 1;
        dr["Name"] = "Aayush";
        dr["Designation"] = "Associate Technical Consultant";
        dr["Department"] = null;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 2;
        dr["Name"] = "Anish";
        dr["Designation"] = null;
        dr["Department"] = null;
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 3;
        dr["Name"] = "Manish";
        dr["Designation"] = null;
        dr["Department"] = "Navision";
        dt.Rows.Add(dr);

        dr = dt.NewRow();
        dr["UserId"] = 4;
        dr["Name"] = "Ravish";
        dr["Designation"] = "Tech Lead";
        dr["Department"] = "CRM";
        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";
                }
            }
        }
        gvDetails.DataSource = dt;
        gvDetails.DataBind();
    }
}

Note: Don't forget to add "jquery.tooltip.min.js" in your solution folder. I have added .js file in js folder(You will get easily on net)

Output will be like this when you mouseover the first column of the gridview ::




Comments

  1. Nice post,
    Here i have similar article i.e Gridview row mouse-over show detail data in floating div with jquery , but instead of mouse-over on button, user can mouse-over on each row and data will get display.

    http://codepedia.info/2015/04/gridview-row-mouseover-show-detail-data-in-floating-div-asp-net-c-jquery/

    ReplyDelete
  2. I copied this scenario to my project. When I run it in Visual Studio, it works fine but it doesn't show tooltip on the server (tried both IE and Firefox). What could be the problem?

    ReplyDelete
  3. there is another problem... if a tooltip is really large, then it goes up and gets hidden under asp.net menu control if someone uses one. Even z-index: 3000; doesn't help

    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