GridView Row Color Change On Mouse Hover

In this tutorial i will let you know how to change GridView Row Color Change On Mouse Hover.Here we are fetching data from SQL Server, to change the color of row on mouse hover.Whenever a row in the GridView gets created, the RowCreated event is fired. Using this event, we can customize the behavior of the GridView.

Design View:

<%@ 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>Hightechnology GridView Row Color change on Mouse Hover</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server" OnRowCreated="GridView1_RowCreated"></asp:GridView>
</div>
</form>
</body>
</html>

Code View:

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

public partial class _Default : System.Web.UI.Page
{
    SqlConnection con = new SqlConnection("Data Source=hightechnology;Integrated Security=true;Initial Catalog=session");
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void BindGridview()
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from dept", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        con.Close();
        GridView1.DataSource = ds;
        GridView1.DataBind();

    }
    protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
    {
        e.Row.Attributes.Add("onMouseOver", "this.style.background='#cccccc'");
        e.Row.Attributes.Add("onMouseOut", "this.style.background='#ffffff'");
    }
}

4 replies on “GridView Row Color Change On Mouse Hover”

It is in point of fact a great and useful piece of info. I am happy that you just shared this helpful information with us. Please keep us informed like this. Thanks for sharing.

Woah! I’m really loving the template/theme of this blog. It’s simple, yet effective. A lot of times it’s hard to get that “perfect balance” between usability and visual appeal. I must say you’ve done a excellent job with this. Also, the blog loads very fast for me on Firefox. Superb Blog!

Perfect just what I was searching for! .

This is usually a really great site content, im delighted I came across it. Ill be back off the track to look at other reports that.

Comments are closed.