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"}, }; } }
No comments:
Post a Comment