Change Gridview Row Color on Mouseover using css and Javascript

In this article, I will show you how to change the colour of ASP.NET GridView Control when the user mouse over the row. In this code snippet, I use only client-side techniques like CSS and JavaScript to achieve the goal. Check out the following code snippet its very easy to understand


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Alternate.aspx.cs" Inherits="Alternate" %>
<!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>Untitled Page</title>

        <style type="text/css">
            .datatable tr:hover,
            .datatable tr.hilite {
                background-color: #dfe7f2;

                color: #000000;
            }
        </style>
    </head>

    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="GridView1" runat="Server" CssClass="datatable"> </asp:GridView>
            </div>
        </form>

        <script type="text/javascript">
            var rows = document.getElementsByTagName("tr");

            for (var i = 0; i < rows.length; i++) {
                rows[i].onmouseover = function () {
                    this.className += " hilite";
                };

                rows[i].onmouseout = function () {
                    this.className = this.className.replace("hilite", "");
                };
            }
        </script>
    </body>
</html>
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class Alternate: System.Web.UI.Page

{

  protected void Page_Load(object sender, EventArgs e)

  {

    if (!IsPostBack)

    {

      GridView1.DataSource = GetCustomMadeDataTable();

      GridView1.DataBind();

    }

  }

  public DataTable GetCustomMadeDataTable()

  {

    //Create a new DataTable object
    System.Data.DataTable objDataTable = new System.Data.DataTable();

    //Create three columns with string as their type
    objDataTable.Columns.Add("ISBN", typeof(string));

    objDataTable.Columns.Add("Title", typeof(string));

    objDataTable.Columns.Add("Publisher", typeof(string));

    objDataTable.Columns.Add("Year", typeof(string));

    DataColumn[] dcPk = new DataColumn[1];

    dcPk[0] = objDataTable.Columns["ISBN"];

    objDataTable.PrimaryKey = dcPk;

    objDataTable.Columns["ISBN"].AutoIncrement = true;

    objDataTable.Columns["ISBN"].AutoIncrementSeed = 1;

    //Adding some data in the rows of this DataTable
    DataRow dr;

    for (int i = 1; i <= 5; i++)

    {

      dr = objDataTable.NewRow();

      dr[1] = "Title" + i.ToString();

      dr[2] = "Publisher" + i.ToString();

      dr[3] = "200" + i.ToString();

      objDataTable.Rows.Add(dr);

    }

    Session["strTemp"] = objDataTable;

    return objDataTable;

  }

}

Post a Comment

Please do not post any spam link in the comment box😊

Previous Post Next Post

Blog ads

CodeGuru