How to highlight GridView Row using javascript on mouseover [Resolved]

Posted by Amulya under ASP.NET on 8/29/2013 | Points: 10 | Views : 2693 | Status : [Member] | Replies : 4

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

How to highlight GridView Row using javascript on mouseover

[Resolved]

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: Allemahesh on: 8/29/2013 [Member] [MVP] Silver | Points: 50

0	http://www.aspdotnet-suresh.com/2011/02/how-to-highlight-gridview-rows-on.html http://csharpdotnetfreak.blogspot.com/2009/04/highlight-gridview-mouseover-javascript.html http://www.mikesdotnetting.com/Article/37/How-to-highlight-a-GridView's-row-on-hover Amulya, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Bandi on: 8/29/2013 [Member] [MVP] Platinum | Points: 50

0	--Design Page <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HighlightGridViewRowusingJavascript.WebForm1" %> <!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 onmouseover and onmouseout</title> <script type="text/javascript"> var oldgridcolor; function SetMouseOver(element) { oldgridcolor = element.style.backgroundColor; element.style.backgroundColor = '#ffeb95'; element.style.cursor = 'pointer'; element.style.textDecoration = 'underline'; } function SetMouseOut(element) { element.style.backgroundColor = oldgridcolor; element.style.textDecoration = 'none'; } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="false" HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" onrowdatabound="gvrecords_RowDataBound"> <Columns> <asp:BoundField DataField="JOB_ID" HeaderText="JOB ID" /> <asp:BoundField DataField="First_Name" HeaderText="FirstName" /> <asp:BoundField DataField="Last_Name" HeaderText="LastName" /> <asp:BoundField DataField="Email" HeaderText="Email" /> </Columns> </asp:GridView> </div> </form> </body> </html> --Code Page using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data.SqlClient; using System.Data; namespace HighlightGridViewRowusingJavascript { public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { BindGridview(); } } protected void gvrecords_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes["onmouseover"] = "javascript:SetMouseOver(this)"; e.Row.Attributes["onmouseout"] = "javascript:SetMouseOut(this)"; } } protected void BindGridview() { SqlConnection con = new SqlConnection("Data Source=XXXXXXX;Integrated Security=true;Initial Catalog=XXXX"); con.Open(); SqlCommand cmd = new SqlCommand("select * from EMPLOYEES", con); cmd.ExecuteNonQuery(); SqlDataAdapter da = new SqlDataAdapter(cmd); DataSet ds = new DataSet(); da.Fill(ds); gvrecords.DataSource = ds; gvrecords.DataBind(); } } } References: http://shawpnendu.blogspot.in/2010/01/highlight-gridview-row-on-mouseover.html http://forums.asp.net/t/1542242.aspx/1?GridView+How+to+highlight+rows+on+mose+hover+and+select+on+click+on+anywhere+on+the+row+ Mark This Response as Answer -- Chandu http://www.dotnetfunda.com/images/dnfmvp.gif Amulya, if this helps please login to Mark As Answer. \| Alert Moderator

--Design Page

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HighlightGridViewRowusingJavascript.WebForm1" %>



<!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 onmouseover and onmouseout</title>

<script type="text/javascript">

    var oldgridcolor;

    function SetMouseOver(element) {

        oldgridcolor = element.style.backgroundColor;

        element.style.backgroundColor = '#ffeb95';

        element.style.cursor = 'pointer';

        element.style.textDecoration = 'underline';

    }

    function SetMouseOut(element) {

        element.style.backgroundColor = oldgridcolor;

        element.style.textDecoration = 'none';





    }

</script>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:GridView runat="server" ID="gvrecords"  AutoGenerateColumns="false" 

HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" 

onrowdatabound="gvrecords_RowDataBound">





<Columns>

<asp:BoundField DataField="JOB_ID" HeaderText="JOB ID" />

<asp:BoundField DataField="First_Name" HeaderText="FirstName" />

<asp:BoundField DataField="Last_Name" HeaderText="LastName" />

<asp:BoundField DataField="Email" HeaderText="Email" />

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

--Code Page

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data.SqlClient;

using System.Data;



namespace HighlightGridViewRowusingJavascript

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                BindGridview();

            }

        }

        protected void gvrecords_RowDataBound(object sender, GridViewRowEventArgs e)

        {

            if (e.Row.RowType == DataControlRowType.DataRow)

            {

                e.Row.Attributes["onmouseover"] = "javascript:SetMouseOver(this)";

                e.Row.Attributes["onmouseout"] = "javascript:SetMouseOut(this)";

            }

        }

        protected void BindGridview()

        {

            SqlConnection con = new SqlConnection("Data Source=XXXXXXX;Integrated Security=true;Initial Catalog=XXXX");

            con.Open();

            SqlCommand cmd = new SqlCommand("select * from EMPLOYEES", con);

            cmd.ExecuteNonQuery();

            SqlDataAdapter da = new SqlDataAdapter(cmd);

            DataSet ds = new DataSet();

            da.Fill(ds);

            gvrecords.DataSource = ds;

            gvrecords.DataBind();

        }

    }

}

References: http://shawpnendu.blogspot.in/2010/01/highlight-gridview-row-on-mouseover.html
http://forums.asp.net/t/1542242.aspx/1?GridView+How+to+highlight+rows+on+mose+hover+and+select+on+click+on+anywhere+on+the+row+

Mark This Response as Answer
--
Chandu
http://www.dotnetfunda.com/images/dnfmvp.gif

Amulya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Nitesh.Luharuka on: 8/29/2013 [Member] Starter | Points: 50

0	Do what you are doing so far in your code. The only ting you need to do is the following - 1. Add the RowDataBound event handler to your grid 2. Add the below 2 lines inside your handler- if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes["onmouseover"] = "javascript:this.style.backgroundColor = '#000000'"; //Change back color to black e.Row.Attributes["onmouseout"] = "javascript:this.style.backgroundColor = '#ffffff'";//Change back color to white } protected void grid_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes["onmouseover"] = "javascript:this.style.backgroundColor = '#000000'"; //Change back color to black e.Row.Attributes["onmouseout"] = "javascript:this.style.backgroundColor = '#ffffff'";//Change back color to white } } Nitesh Luharuka http://www.niteshluharuka.com Amulya, if this helps please login to Mark As Answer. \| Alert Moderator

Do what you are doing so far in your code. The only ting you need to do is the following -
1. Add the RowDataBound event handler to your grid
2. Add the below 2 lines inside your handler-
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:this.style.backgroundColor = '#000000'"; //Change back color to black
e.Row.Attributes["onmouseout"] = "javascript:this.style.backgroundColor = '#ffffff'";//Change back color to white
}

protected void grid_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:this.style.backgroundColor = '#000000'"; //Change back color to black
e.Row.Attributes["onmouseout"] = "javascript:this.style.backgroundColor = '#ffffff'";//Change back color to white
}

}

Nitesh Luharuka
http://www.niteshluharuka.com

Amulya, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Amulya on: 8/29/2013 [Member] Starter | Points: 25

0	Thank you all… Amulya, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts