Friday, July 11, 2014

Show Gridview row detail in Tooltip on mousehover using Jquery in asp.net

Introduction: In this article today I will explain how we can show Gridview row detail in Tooltip on mousehover using Jquery in asp.net.
Tooltip on mousehover
Click here to Enlarge
Description:

To implement the tooltip on mousehover we need to following steps:

      1.       Download the tooltip jquery. To download ClickHere.

2  2.      Create a Store procedure to get data in Sql:

  Create proc [dbo].[getemp]
  AS
BEGIN
  select top 5 * from dbo.employee
  end


3  3.       Add a webform to project and design the .aspx page as show below:

Add the script and style in head of page :

<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
    <script src="Scripts/jquery.tooltip.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function InitializeToolTip() {
            $(".grdemptooltip").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">
    a {text-decoration: none;}
    a : hover {color: #fffff;}
        #tooltip    {
            position: absolute;
            z-index: 3000;
            border: 1px solid #111;
            background-color: #CCCCCC;
            padding: 5px;
            opacity: 0.95;    }
        #tooltip h3, #tooltip div
        {  margin: 0;  }
    </style>

And design the Gridview:

<asp:GridView ID="grdemp" runat="server" DataKeyNames="Id" AutoGenerateColumns="false">
    <AlternatingRowStyle BackColor="Aquamarine" />
    <HeaderStyle BackColor="#047182" Font-Bold="true" ForeColor="White" Width="600px" />   
    <Columns>
    <asp:TemplateField HeaderText="UserId">
<ItemStyle Width="100px" HorizontalAlign="Center" />
<ItemTemplate>
<a href="#" class="grdemptooltip">View Detail</a>
<div id="tooltip" style="display: none;">
<table>
<tr>
<td style="white-space: nowrap;"><b>Name:</b>&nbsp;</td>
<td><%# Eval("Emp_Name")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Salary:</b>&nbsp;</td>
<td><%# Eval("emp_salary")%></td>
</tr>
<tr>
<td style="white-space: nowrap;"><b>Address:</b>&nbsp;</td>
<td><%# Eval("emp_Adress")%></td>
</tr>
</table>
</div>
</ItemTemplate>
</asp:TemplateField>
    <asp:BoundField DataField="Emp_Name" HeaderText="Name" />
<asp:BoundField DataField="emp_salary" HeaderText="Salary" />
    <asp:BoundField DataField="emp_Adress" HeaderText="Address" />
    </Columns>
    </asp:GridView>

Write the code in .aspx.cs file:

using System.Data;
using System.Data.SqlClient;
using System.Configuration

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
        protected void Page_Load(object sender, EventArgs e)
        {
            if(!IsPostBack)
            {
                Bindemp();              
            }
        }
        public void Bindemp()
        {
            SqlCommand cmd = new SqlCommand("getemp", con);
            con.Open();
            SqlDataAdapter adp = new SqlDataAdapter(cmd);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            grdemp.DataSource = dt;
            grdemp.DataBind();
            con.Close();
        }
  
In VB:

Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Bindemp()
        End If
    End Sub
    Public Sub Bindemp()
        Dim cmd As New SqlCommand("getemp", con)
        con.Open()
        Dim adp As New SqlDataAdapter(cmd)
        Dim dt As New DataTable()
        adp.Fill(dt)
        grdemp.DataSource = dt
        grdemp.DataBind()
        con.Close()
    End Sub

Build, run the project and check the result.

Is this article helpful for you?

If yes post your comment to appreciate my work and fell free to contact me. You can like me on Facebook, Google+, Linkedin and Twitter via hit on Follow us Button and also can get update follow by Email. 

6 comments:

  1. jquery.tooltip.min.js where is this file ?????????

    ReplyDelete
    Replies
    1. there is a link to download the jquery in first step.

      Delete
    2. Where css grdemptooltip this page

      Delete
    3. Here no need to create CSS class .grdemptooltip....

      Delete
  2. not Working if we put grid view in behalf of table

    ReplyDelete
  3. not working ,gettting error on jquery.tooltip.min.js

    ReplyDelete