Highlight_gridview_row.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="highlight_gridview_row.aspx.cs" Inherits="MainFolder_SubFolder_highlight_gridview_row" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Highlighting gridview row on mouse over using css and javascript in asp.net and c#</title>
<style type="text/css">
.highlightrow
{
background-color:#e5e5e5;
}
.normal
{
background-color:white;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:gridview id="GridView1" runat="server" width="100%" EnableTheming="false" AutoGenerateColumns="false" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField HeaderText="Email" >
<ItemTemplate>
<asp:Label ID="lbl_Email" Text='<%# Bind("User_Email")%>' runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="15px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="First Name" >
<ItemTemplate>
<asp:Label ID="lbl_first_name" Text='<%# Bind("User_First_Name")%>' runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="15px" />
</asp:TemplateField>
<asp:TemplateField HeaderText="Last Name" >
<ItemTemplate>
<asp:Label ID="lbl_last_name" CssClass="aLinkButton" Text='<%# Bind("User_Last_Name")%>' runat="server"></asp:Label>
</ItemTemplate>
<ItemStyle Font-Size="15px" />
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
<asp:Label ID="lbl_RecordNotFound" Text="No Record Found" runat="server" Font-Size="Larger" ForeColor="maroon" ></asp:Label>
</EmptyDataTemplate>
</asp:gridview>
</div>
</form>
</body>
</html>
I have created two internal css classes that will play their role for
highlighting the rows of gridview, these are
.highlightrow
{
background-color:#e5e5e5;
}
.normal
{
background-color:white;
}
I will call highlightrow class for onmouseover client side event and second class for onmouseout client side event.
Highlight_gridview_row.aspx.csFirst Method:-protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'"); e.Row.Attributes.Add("onmouseout", "this.className='normal'");
}
}
Or you can do this without defining internal css classes in this way
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='#e5e5e5'");
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#ffffff'");
}
}
Second Method:-protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normal'");
}
}
Once again I m saying that I prefer First Method which is to
highlight gridview row on mouse over by using OnRowDataBound event because why should we create the OnRowCreated event of Gridview, if we can do this work in OnRowDataBound event. One thing more, the code written in Second Method can also run without OnRowCreated event of Gridview but once again why should we write extra function, if we we can write that code in OnRowDataBound event of gridview.
So these are the ways to
highlight gridview row on mouse over using css and javascript in asp.net using c#.
Happy Coding…..
Keep Coding…….
