Friday, August 18, 2017

How to show tooltip on entire Gridview row hover in

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

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.


Complete source of webform

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

Add namespaces

C# Code
using System.Configuration;
using System.Data.SqlClient;
using System.Data; 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)
    public void Fillgrid()
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            GridView1.DataSource = dt;
        catch(Exception ex){}
    } 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
        End If
    End Sub
    Public Sub Fillgrid()
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            GridView1.DataSource = dt
        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();
    } 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

No comments:

Post a Comment