On Mouseover how to Highlight ASP.NET Gridview Selected Row

On Mouseover how to Highlight ASP.NET Gridview Selected Row

To present data in tabular form in ASP.NET Gridview is so popular. Nearly 90% ASP.NET Developers love to work with Gridview. In a Gridview we can bind several data sources. Gridview is easy & take less time to implement. Any time of Customization we required to show in a tabular data it is possible using Gridview.

In this example let us discuss a situation where On mouse over I want to Highlight each row of a Gridview. To do this here I used a XML data source to display records in Gridview. On over the mouse event I am binding 2 different CSS classes to highlight the row.

From several events of a Gridview control RowCreated is fired when a row created programmatically. To add my CSS classes for highlight feature inside grdDemo_RowCreated() event I added 2 events onmouseover & onmouseout to each row of the Grid. In onmouseover event I am assigning the CSS class hightlighrow with background-color:#CCCCCC;. While when user remove his mouse from the row to revert back into previous background color I added onmouseout event with CSS class normalrow. normalrow CSS class contains the default background color white. Look at the demo code below.

Default.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!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>On Mouseover how to Highlight ASP.NET Gridview Selected Row</title>
<style type="text/css">
.normalrow
{
background-color:white;
}
.hightlighrow
{
background-color:#cccccc;
}
</style>
</head>
<body>
<form id="frmGridview" runat="server">
<asp:GridView ID="grdDemo" runat="server">
</asp:GridView>
</form>
</body>
</html>

Default.aspx.vb

Imports System.Data
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
Dim employeelog = New DataSet
employeelog.ReadXml(MapPath("employees.xml"))
grdDemo.DataSource = employeelog
grdDemo.DataBind()
End If
End Sub
Protected Sub grdDemo_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles grdDemo.RowCreated
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "this.className='hightlighrow'")
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'")
End If
End Sub
End Class

employees.xml

<?xml version="1.0" encoding="ISO-8859-1"?>
<employees>
<emp>
<name>Abhishek Srivastab</name>
<designation>Technical Head</designation>
<company>Cognizant Solution</company>
<salary>75,000</salary>
</emp>
<emp>
<name>Biswabhusan Panda</name>
<designation>Project Manager</designation>
<company>TATA Technology</company>
<salary>86,000</salary>
</emp>
<emp>
<name>Sunanda Patnayak</name>
<designation>Team Leader</designation>
<company>Wipro</company>
<salary>82,000</salary>
</emp>
<emp>
<name>Raghav Roy</name>
<designation>Sr. UI Developer</designation>
<company>Persistent System</company>
<salary>61,000</salary>
</emp>
</employees>