Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Gridview row color change on MouseOver using jQuery

Article:
Viewed:  2904 
Posted On:  24/04/2013 08:09:06 
How to change GridView row back color on mouse hover using jQuery..? 

In this article I am going to show how we can make a mouse hover color change in a GridView with the help of jQuery...

My Output is:

1.png

Image 1.

Now mouse hover on any row...

2.png
Image 2.

aspx is:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
    <title>GridView Row Color change on MouseHover...</title>
 
    <script src="jquery-1.8.2.js" type="text/javascript"></script>
 
    <script type="text/javascript">
        $(document).ready(function() {
        $('#GridEmployee tr:has(td)').mouseover(function() {
        $(this).addClass('OnMouseHoverCSS');
        });
        $('#GridEmployee tr').mouseout(function() {
        $(this).removeClass('OnMouseHoverCSS');
        })
        })
    </script>
 
    <style type="text/css">
        .OnMouseHoverCSS
        {
            background-color: #48CCCD;
            text-decoration: underline;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table cellpadding="20" cellspacing="20" width="50%" align="center" border="2">
            <tr>
                <td align="center">
                    <asp:GridView runat="server" ID="GridEmployee" AutoGenerateColumns="False" HeaderStyle-BackColor="#7779AF"
                        HeaderStyle-ForeColor="White" CellPadding="4" ForeColor="#333333" GridLines="None">
                        <Columns>
                            <asp:BoundField DataField="EmployeeNo" HeaderText="EmployeeNo" />
                            <asp:BoundField DataField="Name" HeaderText="Name" />
                            <asp:BoundField DataField="EmployeeCode" HeaderText="EmployeeCode" />
                            <asp:BoundField DataField="Keywords" HeaderText="Keywords" />
                            <asp:BoundField DataField="Mobile" HeaderText="Mobile" />
                            <asp:BoundField DataField="Country" HeaderText="Country" />
                        </Columns>
                        <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                        <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                        <HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True"></HeaderStyle>
                    </asp:GridView>
                </td>
            </tr>
        </table>
    </div>

    
</form>
</body>
</html>
 

aspx.cs is:

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;
 
public partial class _Default : System.Web.UI.Page
{
    SqlDataAdapter da;
    DataSet ds = new DataSet();
 
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindData();
        }
    }
 
    private void BindData()
    {
        SqlConnection con = new SqlConnection(@"Server=.;Database=Test;Integrated Security=true;");
        SqlCommand cmd = new SqlCommand("SELECT  * FROM Employee", con);
 
        try
        {
            da = new SqlDataAdapter(cmd);
            da.Fill(ds);
            con.Open();
            cmd.ExecuteNonQuery();
            con.Close();
 
            if (!object.Equals(ds.Tables[0], null))
            {
                if (ds.Tables[0].Rows.Count > 0)
                {
                    GridEmployee.DataSource = ds.Tables[0];
                    GridEmployee.DataBind();                    
                }
                else
                {
                    GridEmployee.DataSource = null;
                    GridEmployee.DataBind();
                }
            }
            else
            {
                GridEmployee.DataSource = null;
                GridEmployee.DataBind();
            }
        }
        catch (Exception ex)
        {
        }
    }
 }

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us