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

Posted by Amulya under ASP.NET on 8/29/2013 | Points: 10 | Views : 1689 | Status : [Member] | Replies : 5
How to highlight GridView Row using javascript on mouseover




Responses

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

Up
0
Down

Resolved
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="WebApplication3._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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.normal
{
background-color:white;
}
.highlighted1
{
background-color:red;
}
.highlighted2
{
background-color:yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server">
<Columns>
<asp:BoundField DataField="sid" HeaderText="ID" />
<asp:BoundField DataField="sname" HeaderText="NAME" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>



Imports System.Data.SqlClient
Imports System.Data
Partial Public Class _Default
Inherits System.Web.UI.Page
Dim strConnString As String = System.Configuration.ConfigurationManager.ConnectionStrings.Item("ConnectionString").ToString()
Dim con As New SqlConnection(strConnString)
Dim sqlda As SqlDataAdapter
Dim com As SqlCommand
Dim ds As DataSet
Dim str As String

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
bindgrid()
End If
End Sub
Sub bindgrid()
Try
con.Open()
str = "select * from student"
com = New SqlCommand(str, con)
sqlda = New SqlDataAdapter(com)
ds = New DataSet
sqlda.Fill(ds, "student")
GridView1.DataSource = ds
GridView1.DataMember = "student"
GridView1.DataBind()
con.Close()
Catch ex As Exception
Response.Write(ex.Message)
End Try
End Sub

Protected Sub GridView1_RowCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowCreated
If e.Row.RowType = DataControlRowType.DataRow Then
e.Row.Attributes.Add("onmouseover", "className='highlighted1'")
e.Row.Attributes.Add("onmouseout", "className='highlighted2'")

End If
End Sub
End Class


If this post helps you mark it as answer
Thanks

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

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

Up
0
Down

Resolved
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

Up
0
Down

Resolved
--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

Up
0
Down

Resolved
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

Up
0
Down
Thank you all…

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

Login to post response