How to Highlight GridView Row on Mouseover Using CSS in Asp.Net

In this post we will discuss How to Highlight GridView Row on Mouseover Using CSS in Asp.Net. Earlier we discussed about Show GridView Row Details in Tooltip on Mouseover Using JQuery in ASP.NET, Delete Multiple Rows In GridView In Asp.Net Using Checkbox, How To Store GridView Data In SQL Server Database Row By Row Basis. Here we are just using CSS to accomplish this.

Design:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to Highlight GridView Row on Mouseover Using CSS in Asp.Net</title>

<style type="text/css">

body
 {
 width: 980px;
 margin: 0px auto;
 text-align: center;
 padding-top: 50px;
 font-size: 20px;
 }
.mouseover
{
background-color:#ffd800;
}
.mouseout
{
background-color:#ffffff;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<h2>How to Highlight GridView Row on Mouseover Using CSS in Asp.Net</h2>
<div>
<asp:GridView ID="gv" runat="server" Width="100%" AutoGenerateColumns="false" OnRowCreated="gv_RowCreated">
<Columns>

<asp:TemplateField HeaderText="UID">
<ItemTemplate><asp:Label ID="uidn" runat="server" Text='<%#Eval("uid") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="UserName">
<ItemTemplate><asp:Label ID="uname" runat="server" Text='<%#Eval("username") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

<asp:TemplateField HeaderText="User Email">
<ItemTemplate><asp:Label ID="uemail" runat="server" Text='<%#Eval("uemail") %>'></asp:Label></ItemTemplate>
</asp:TemplateField>

</Columns>
</asp:GridView>    

<br /><br />
All rights reserved by <a href="http://www.hightechnology.in">www.Hightechnology.in</a> | Hosting partner <a href="http://www.grootstech.com" target="_blank">Grootstech</a>
</div>
</form>
</body>
</html>

Code:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    String strcon=ConfigurationManager.ConnectionStrings["connnn"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            binddata();
        }
    }
    public void binddata()
    {
        SqlConnection con = new SqlConnection(strcon);
        try
        {
            con.Open();
        }
        catch { }
        string str = "select top(5) * from users";
        SqlCommand cmd = new SqlCommand(str, con);
        SqlDataReader reader;
        reader = cmd.ExecuteReader();
        gv.DataSource = reader;
        gv.DataBind();
        con.Close();
    }
    protected void gv_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.className='mouseover'"); 
            e.Row.Attributes.Add("onmouseout", "this.className='mouseout'"); 
        }
    }
}