In this article I am going to explain how to display tooltip
in Gridview column on mouseover in asp.net.
Description:
I am displaying employee’s information in Gridview and want
to display each column data when placed mouse on column. We have 2 options 1st
write code on RowDataBound event
of Gridview and 2nd use the label control’s tooltip property.
Implementation:
Method 1:
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)
{
foreach (TableCell cell in e.Row.Cells)
{
cell.Attributes.Add("Mouseover", cell.Text);
}
}
//for
(int i = 0; i < e.Row.Cells.Count; i++)
//{
// e.Row.Cells[i].ToolTip =
e.Row.Cells[i].Text;
//}
}
VB.net Code
Protected Sub GridView1_RowDataBound(sender As Object, e As
GridViewRowEventArgs) Handles
GridView1.RowDataBound
If e.Row.RowType =
DataControlRowType.DataRow Then
For Each cell As TableCell In e.Row.Cells
cell.Attributes.Add("Mouseover", cell.Text)
Next
End If
'for
(int i = 0; i < e.Row.Cells.Count; i++)
'{
' e.Row.Cells[i].ToolTip =
e.Row.Cells[i].Text;
'}
End
Sub
Method 2 :
Use label control to display the data. Use as shown below:
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblname" runat="server" Text='<%#Eval("Name") %>' ToolTip='<%#Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
No comments:
Post a Comment