Subscribe
Please visit my new Web Site WWW.Codedisplay.com
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:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridView_Row_Highlight.aspx.cs" Inherits="GridView_Row_Highlight" %>
<!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>How to highlight Gridview row using javascript</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView_Products" runat="server" AutoGenerateColumns="False"
Width="100%" Font-Names="tahoma" onrowcreated="GridView_Products_RowCreated">
<HeaderStyle BackColor="Red" Font-Bold="true" ForeColor="White" />
<RowStyle BackColor="Gray" />
<AlternatingRowStyle BackColor="LightGray" />
<SelectedRowStyle BackColor="Pink" ForeColor="White" Font-Bold="true" />
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Description" HeaderText="Description" />
<asp:BoundField DataField="Color" HeaderText="Color" />
<asp:BoundField DataField="Size" HeaderText="Size" />
<asp:CommandField ShowSelectButton="True" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Now go to the code behind and write following code:using System;
using System.Web.UI.WebControls;
public partial class GridView_Row_Highlight : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// Bind your data in your own way
GridView_Products.DataSource = clsDbUtility.ExecuteQuery("Select * FROM Product");
GridView_Products.DataBind();
}
}
protected void GridView_Products_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// When user moves mouse over the GridView row,First save original or previous color to new attribute,
// and then change it by magenta color to highlight the gridview row.
e.Row.Attributes.Add("onmouseover","this.previous_color=this.style.backgroundColor;this.style.backgroundColor='Magenta'");
// When user leaves the mouse from the row,change the bg color
// or backgroud color to its previous or original value
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.
2 comments:
Great thanks it has worked fine for me...
Shabbir
Thanks for the help!
I WOULD BE DELIGHTED TO HEAR FROM YOU