Different approaches to change Gridview row color on mousehover in asp.net - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

Different approaches to change Gridview row color on mousehover in asp.net

In this article I am going to explain different approaches to change Gridview row color on mousehover in asp.net.

Description:
I am showing employees detail in Gridview data control. I want to change the color of row on mousehover.


Implementation:
We have many approaches to change the row color on mousehover code behind, through CSS and javascript.

HTML Markup of webform:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>Change Gridview row color on mousehover</title>
    <style type="text/css">            
               .Rowhighlightcolor
               {
                       background-color: #f5f5f5;
                       cursor: pointer;
               }
                  .Rowdefaultcolor
               {
                       background-color: #FFFFFF;
               }
              #GridView1 tr.rowHover:hover
                  {
                  background-color: #f5f5f5;
                  }

       </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" RowStyle-CssClass=" grdrowHover ">
            <Columns>
                <asp:BoundField HeaderText="Name" DataField="Name" NullDisplayText="-NA-">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="Phone" HeaderText="Phone" NullDisplayText="-NA-">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="Salary" HeaderText="Salary" NullDisplayText="-NA-">
                  <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                  <asp:BoundField DataField="Department" HeaderText="Department" NullDisplayText="-NA-">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField DataField="EmailId" HeaderText="Email" NullDisplayText="-NA-">
                <HeaderStyle HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:ImageField DataImageUrlField="ImagePath" ControlStyle-Height="100" ControlStyle-Width="100" NullDisplayText="-NA-">
<ControlStyle Height="100px" Width="100px"></ControlStyle>
                </asp:ImageField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Add namespace
C# Code
using System.Configuration;
using System.Data.SqlClient;
using System.Data;

VB.net Code
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Bind gridview
Create a method to bind gridview and call it on page load.

C# Code
    SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connection"].ToString());
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Fillgrid();
        }
    }
    public void Fillgrid()
    {
        try
        {
            SqlDataAdapter adp = new SqlDataAdapter("Select * from Employees", con);
            DataTable dt = new DataTable();
            adp.Fill(dt);
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
        catch(Exception ex){}
    }

VB.net Code
  Private con As New SqlConnection(ConfigurationManager.ConnectionStrings("connection").ToString())
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Fillgrid()
        End If
    End Sub
    Public Sub Fillgrid()
        Try
            Dim adp As New SqlDataAdapter("Select * from Employees", con)
            Dim dt As New DataTable()
            adp.Fill(dt)
            GridView1.DataSource = dt
            GridView1.DataBind()
        Catch ex As Exception
        End Try
    End Sub

1st approach:
Write the below given code on Rowdatabound event of gridview

C# Code
  protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
    {
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
            e.Row.Attributes.Add("onMouseOver", "this.style.backgroundColor='#f1f3f5';");
            e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='#FFFFFF';");
        }      
    }

VB.net Code
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
     For i As Integer = 0 To e.Row.Cells.Count - 1
            e.Row.Cells(i).ToolTip = e.Row.Cells(i).Text
            e.Row.Attributes.Add("onMouseOver", "this.style.backgroundColor='#f1f3f5';")
            e.Row.Attributes.Add("OnMouseOut", "this.style.backgroundColor='#FFFFFF';")
        Next
    End Sub

2nd approach
Create CSS class and apply it on gridview.

CSS style:
    <style type="text/css">
              #GridView1 tr.grdrowHover:hover
                  {
                  background-color: #f5f5f5;
                  }

       </style>

Apply CSS class on Gridview
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" RowStyle-CssClass="grdrowHover">


3rd approach
Create CSS class and call it on code behind on Gridview Rowdatabound event.

CSS style:
    <style type="text/css">            
               .Rowhighlightcolor
               {
                       background-color: #f5f5f5;
                       cursor: pointer;
               }
                  .Rowdefaultcolor
               {
                       background-color: #FFFFFF;
               }
       </style>

C# code
protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
    {
        for (int i = 0; i < e.Row.Cells.Count; i++)
        {
            e.Row.Cells[i].ToolTip = e.Row.Cells[i].Text;
            e.Row.Attributes.Add("onMouseOver", "this.className='Rowhighlightcolor';");
            e.Row.Attributes.Add("onmouseout", "this.className='Rowdefaultcolor';");
        }      
    }

VB.net code
Protected Sub GridView1_RowDataBound(sender As Object, e As GridViewRowEventArgs) Handles GridView1.RowDataBound
     For i As Integer = 0 To e.Row.Cells.Count - 1
            e.Row.Attributes.Add("onMouseOver", "this.className='Rowhighlightcolor';")
            e.Row.Attributes.Add("onmouseout", "this.className='Rowdefaultcolor';")
        Next
    End Sub

4th approach
Create a Javascript function and apply the CSS class.

<style type="text/css">            
               .Rowhighlightcolor
               {
                       background-color: #f5f5f5;
                       cursor: pointer;
               }
                  .Rowdefaultcolor
               {
                       background-color: #FFFFFF;
               }

       </style>


    <script type="text/javascript">
        $(document).ready(function () {
            $('td').hover(function () {
                $('tr').each(function () {
                    $(this).removeClass('Rowhighlightcolor');
                });
                $(this).parent().addClass('Rowhighlightcolor');
            });
        });
    </script>



What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon