Asp.net GridView gives us huge facility that we can't imagine few years
ago. But still we have a lot of chance to improve look & feel as
well as GridView functionality. Here in this article i will describe
how you can highlight a gridview row when move the mouse over the row
and also how to retain the original background color when user leaves
the mouse from a row or in mouseout event.
google_ad_client = "pub-7628238925744083";
google_ad_host = "pub-1556223355139109";
google_ad_host_channel="00000+00031+00005";
/* 300x250, created 5/5/09 */
google_ad_slot = "4236597451";
google_ad_width = 300;
google_ad_height = 250;
google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);Asp.net GridView gives us huge
facility that we can't imagine few years ago. But still we have a lot
of chance to improve look & feel as well as GridView functionality.
Here in this article i will describe how you can highlight a gridview
row when move the mouse over the row and also how to retain the
original background color when user leaves the mouse from a row or in
mouseout event. After googling i found a lot of series on Gridview row
highlighting issues but unfortunately most of them uses style sheet to
change GridView row colour. But my observation is if you strict on
using CSS to highlight GridView row then you will face difficulties
when your Grid contains different background color for rowstyle and
alternative rowstyle. I hope you will not face this problem if you use
my technique. In a small quote i can say that how i can do this. First
when user moves mouse pointer over the row then at first i copied the
rows original color & then change the color to highlight the rows
using javascript. And when user leaves the row or mouseout then i
assign the previously copied color as row backgroud using javascript.
So if your gridview contains different color for different row style
highlight will works nicely.
As you knew that Gridview won't gives us the highlighting facility by
default but we can achieve highlighting functionality by using simple
javascript. To do that we need to use two javascript event. The one is
onmouseover event which is also termed as Mouse Hover effect. The
another one is onmouseout event. By using this two strong javascript
events we will highlight our GridView rows. Ok now we know which
javascript event we will use but how we can add these two javascript
event handler with our GridView rows? The answer is simple. GridView
gives us an event named RowCreated which we can use to bind
javascript event with our GridView rows. Let’s look how we can do this.
To do that first add a page in your project and give the name
GridView_Row_Highlight.aspx. Now copy the following HTML markup code
into the page:
| 01 |
<%@
Page Language="C#" AutoEventWireup="true"
CodeFile="GridView_Row_Highlight.aspx.cs"
Inherits="GridView_Row_Highlight" %> |
| 03 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| 05 |
<html xmlns="http://www.w3.org/1999/xhtml"> |
| 07 |
<title>How to highlight Gridview row using javascript</title> |
| 11 |
<form id="form1" runat="server"> |
| 14 |
<asp:GridView ID="GridView_Products" runat="server" AutoGenerateColumns="False" |
| 15 |
Width="100%" Font-Names="tahoma" onrowcreated="GridView_Products_RowCreated"> |
| 16 |
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" /> |
| 17 |
<RowStyle BackColor="Gray" /> |
| 18 |
<AlternatingRowStyle BackColor="LightGray" /> |
| 19 |
<SelectedRowStyle BackColor="Pink" ForeColor="White" Font-Bold="true" /> |
| 21 |
<asp:BoundField DataField="Name" HeaderText="Name" /> |
| 22 |
<asp:BoundField DataField="Description" HeaderText="Description" /> |
| 23 |
<asp:BoundField DataField="Color" HeaderText="Color" /> |
| 24 |
<asp:BoundField DataField="Size" HeaderText="Size" /> |
| 25 |
<asp:CommandField ShowSelectButton="True" /> |
Now go to the code behind and write following code:
| 02 |
using System.Web.UI.WebControls; |
| 04 |
public partial class GridView_Row_Highlight : System.Web.UI.Page |
| 06 |
protected void Page_Load(object sender, EventArgs e) |
| 10 |
// Bind your data in your own way |
| 11 |
GridView_Products.DataSource = clsDbUtility.ExecuteQuery("Select * FROM Product"); |
| 12 |
GridView_Products.DataBind(); |
| 15 |
protected void GridView_Products_RowCreated(object sender, GridViewRowEventArgs e) |
| 17 |
if (e.Row.RowType == DataControlRowType.DataRow) |
| 19 |
// When user moves mouse over the GridView row,First save original or previous color to new attribute, |
| 20 |
// and then change it by magenta color to highlight the gridview row. |
| 21 |
e.Row.Attributes.Add("onmouseover","this.previous_color=this.style.backgroundColor;this.style.backgroundColor='Magenta'"); |
| 23 |
// When user leaves the mouse from the row,change the bg color |
| 24 |
// or backgroud color to its previous or original value |
| 25 |
e.Row.Attributes.Add("onmouseout","this.style.backgroundColor=this.previous_color;"); |
Now run the project & hope you will get output like below:
OK now you can highlight gridview row using javascript even your
GridView row has different color for different conditions. Happy
programming.
