GridviewMouseHoverRow

How to change row color of gridview on mouseover in asp.net

Spread the love

Hello, in this article, I will be explaining how to change the row color of an asp.net gridview control on mouseover. Before going into the details of coding, let me explain the basic logic of how this is performed. It’s very simple, all we have to do is we have to associate the javascript’s onmouseover and onmouseout events with the rows of gridview and in those events, we need to set the background color of the rows in the rowdatabound event. That’s it. Simple isn’t it?

Follow the following steps to see it in action:

1. Create a new website and let’s name it GridviewMouseoverRow
CreateNewWebsite_MouseOverGrid

2. Select Asp.Net Empty Website and provide the name for the website (in our case, GridviewMouseoverRow)
ProvideProjectName_GridviewMouseoverRow

3. Add new web form (let’s name it Default.aspx).
AddNewWebForm_NestedGrids

4. Add the following code in aspx page (default.aspx)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="grd" AutoGenerateColumns="true" OnRowDataBound="grd_RowDataBound" runat="server">
        </asp:GridView>
    </form>
</body>
</html>

5. Add the following code in code behind (default.aspx.cs)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 == false)
        {
            GrdBind();
        }
    }
    protected void grd_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.originalstyle = this.style.backgroundColor; this.style.backgroundColor = '#0071b6'; this.style.color = 'White'");  
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalstyle;this.style.color=this.originalstyle;");
        }
    }
 
    private void GrdBind()
    {
        SqlConnection con = new SqlConnection();
        con.ConnectionString = "server=SUNNY-PC\\SQLEXPRESS;database=AspSkills;integrated security=true;";
        SqlCommand cmd = new SqlCommand("select * from country_tbl",con);
        SqlDataAdapter adp = new SqlDataAdapter(cmd);
        DataSet ds = new DataSet();
        adp.Fill(ds);
        cmd.Dispose();
        grd.DataSource = ds;
        grd.DataBind();
    }
}

6. Now when you run the project, you should be able to see the gridview’s row color changing on mouseover, as shown in the screenshot below:

GridviewMouseHoverRow


Leave a Reply

Your email address will not be published. Required fields are marked *