Skip to main content

Highlighting rows/cells of a GridView on hover

aspdotnetcodebook In this post I will show you how to highlight grid view row on mouseover using jquery.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GridviewRowColorChange.aspx.cs"
    Inherits="GridviewRowColorChange" %>

<!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></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <style type="text/css">
        .highlight
        {
            background-color:#9999FF;
        }  
        td
        {
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#<%=gvProducts.ClientID %> tr").mouseover(function () {
                $(this).addClass("highlight");
            });
            $("#<%=gvProducts.ClientID %> tr").mouseout(function () {
                $(this).removeClass("highlight");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gvProducts" runat="server">
        </asp:GridView>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class GridviewRowColorChange : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            gvProducts.DataSource = ProductDAL.GetProducts();
            gvProducts.DataBind();
        }
    }
}
public class Product
{
    public int ProductID { get; set; }
    public string ProductName { get; set; }
    public string Description { get; set; }
}
public class ProductDAL
{
    public static List<Product> GetProducts()
    {
        return new List<Product>()
                   {
                       new Product() {ProductID = 1, ProductName = "P001", Description = "Desc01"},
                       new Product() {ProductID = 2, ProductName = "P002", Description = "Desc02"},
                       new Product() {ProductID = 3, ProductName = "P003", Description = "Desc03"},
                       new Product() {ProductID = 4, ProductName = "P004", Description = "Desc04"},
                       new Product() {ProductID = 5, ProductName = "P005", Description = "Desc05"},
                   };
    }

}

Comments

Popular posts from this blog