How to show tooltip on entire Gridview row hover in asp.net

In this article I am going to explain how to show tooltip on entire Gridview row mouse hover in asp.net.


Description:
I am displaying employees information in Gridview and want to display name & phone no. when mouse is hovered on row. To fulfill this requirement we have write code on RowDataBound event of Gridview.

Implementation: 

Complete source of webform

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title> Show tooltip on entire Gridview row hover </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:BoundField HeaderText="Name" DataField="Name">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="Phone" HeaderText="Phone" >
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="Salary" HeaderText="Salary" >
                  <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                  <asp:BoundField DataField="Department" HeaderText="Department">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="EmailId" HeaderText="Email">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Height="100" ControlStyle-Width="100">
<ControlStyle Height="100px" Width="100px"></ControlStyle>
                </asp:ImageField>
            </Columns>
        </asp:GridView>
    </div>
    </form>  
</body>
</html>

Add namespaces

C# Code
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

VB.net Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind Gridview
Create a method to bind Gridview and call it on page load.

C# Code

    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Fillgrid();
        }
    }
    public void Fillgrid()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch(Exception ex){}
    }

VB.net Code

    Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Fillgrid()
        End If
    End Sub
    Public Sub Fillgrid()
        Try
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        Catch ex As Exception
        End Try
    End Sub

Display Tooltip on mouse hover
On Rowdatabound event write the below given code.

C# Code

protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            if ((e.Row.DataItem as DataRowView)["Name"].ToString().Trim() != string.Empty)
                e.Row.ToolTip = "Employee Name : " + (e.Row.DataItem as DataRowView)["Name"].ToString() + ", Phone No. :" + (e.Row.DataItem as DataRowView)["Phone"].ToString();
        }
    }

VB.net Code

  Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
        If e.Row.RowType = DataControlRowType.DataRow Then
            If TryCast(e.Row.DataItem, DataRowView)("Name").ToString().Trim() <> String.Empty Then
                e.Row.ToolTip = "Employee Name : " + TryCast(e.Row.DataItem, DataRowView)("Name").ToString() + ", Phone No. :" + TryCast(e.Row.DataItem, DataRowView)("Phone").ToString()
            End If
        End If
    End Sub

Post a Comment

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget