On Mouseover how to Highlight ASP.NET Gridview Selected Row

Microsoft Technologies
May 14, 2016
0 (0 votes)
On Mouseover how to Highlight ASP.NET Gridview Selected Row
0 out of 5 based on 0 user ratings
hot Video Call Service by divorced Housewives. WhatsApp her

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 Gridview Selected Row. 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>

Tags:, , ,