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
.png)
No comments:
Post a Comment