How to highlight GridView row on mouseover using CSS in ASP.NET
In this article I’m going to explain how to highlight GridView row on mouseover in ASP.NET
If we want to highlight Gridview row on mouseover we have to use CSS and GridView OnRowCreated event.
First we have to write style class for GridView row normal color and highlight color.
Sample code:
<style type="text/css">
.normal
{
background-color:white;
}
.highlight
{
background-color:#cccccc;
}
</style>
Then we have to write couple of server side code for GridView OnRowCreated event. Here GridView row styles will be applied.
Sample code:
protected void gvEmployee_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='highlight'");
e.Row.Attributes.Add("onmouseout", "this.className='normal'");
}
}
Designer source code:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" 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>Gridview mouse hover effect</title>
<style type="text/css">
.normal
{
background-color:white;
}
.highlight
{
background-color:#cccccc;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="false" Width="600px"
OnRowCreated="gvEmployee_RowCreated">
<HeaderStyle BackColor="#3E3E3E" Font-Bold="True" Font-Names="cambria" ForeColor="White" />
<RowStyle Font-Names="Calibri" />
<Columns>
<asp:BoundField DataField="empid" HeaderText="Employee ID" />
<asp:BoundField DataField="name" HeaderText="Name" />
<asp:BoundField DataField="designation" HeaderText="Designation" />
<asp:BoundField DataField="city" HeaderText="City" />
<asp:BoundField DataField="country" HeaderText="Country" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
C# code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindData();
}
}
protected void BindData()
{
DataSet ds = new DataSet();
ds.ReadXml(Server.MapPath("EmployeeDetails.xml"));
if (ds != null && ds.HasChanges())
{
gvEmployee.DataSource = ds;
gvEmployee.DataBind();
}
}
protected void gvEmployee_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='highlight'");
e.Row.Attributes.Add("onmouseout", "this.className='normal'");
}
}
}
No comments:
Post a Comment