In this asp.net tutorial you will learn how to highlight gridview row on mouse over using javascript and css in asp.net using c#. There are couples of methods to highlight rows of gridview on mouse over. I preferred first one which is OnRowDataBound event of GridView.
So let's have a look over .aspx code
So let's have a look over .aspx code
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.cs
First 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…….
0 comments:
Post a Comment