Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Highlight asp.net gridview rows on mouseover - out using JavaScript

Feb 7, 2011
Introduction:

Here I will explain how to highlight gridview rows based on mouseover and mouseout using JavaScript in asp.net.

Description:

During work with one application I got requirement like change gridview rows color based on mouseover and mouseout using asp.net for that I used JavaScript functionality to handle onmouseover and onmouseout situations to implement this one first design aspx page like this 


<html xmlns="http://www.w3.org/1999/xhtml">
<head 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="UserName" HeaderText="UserName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Email" HeaderText="Email" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>  

After that add using System.Data; and using System.Data.SqlClient; namespaces in code behind and write the following code 


 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=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select * from UserDetails", con);
cmd.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvrecords.DataSource = ds;
gvrecords.DataBind();
}
If you observe above code I written two events in gridview row databound condition by using those conditions we can handle gridview onmouseover and onmouseout events with JavaScript

Demo


If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

12 comments :

Unknown said...

In my project their is User side and admin side...
mine admin part is almost over..
now when particular userlogin..
it would found particular collection which had been authenticated by admin..
its in admin's right to give user permission for following any collection..
in my project..is of product mgmt..
now first of all theri is collection under collection category belong now under category their is product of particular selected category...
now when user login first of all collection images open now after that clicking on image particular image containg category opens..
now after that..image of product in very medium size opens..
now selecting image ..
its size incerses in new page...
plz help me out for my user page..
jainvijay089@gmail.com

Anonymous said...

Thanks Man

bSivel said...

Works great if you only have to change color but I have a requirement that also calls for showing contents of hidden columns as well. I cannot get both to work, only one or the other. I can post my code if you think you can help. Please advise - brian sivel

Anonymous said...

sir in the header color of thee grid is also changing i want that the header color should remain as it is .

can u help me ??

tnx in advance

Anonymous said...

All the articles and demos shown on this site works greatly..:)

Anonymous said...

lovely.....nice

Anonymous said...

You could do it simply with CSS. There is special :hover pseudoclass for it...

TR:hover
{
background-color = '#ffeb95';
/* apply other styles here */
}

Anonymous said...

Nice>..........

Unknown said...

Nice way.....

Unknown said...

hi suresh sir... i want help.... i want code of stenography which is password protected in c#.net ... may you help me.. ????

hhhhnkjh said...

GB gvbb

hhhhnkjh said...

GB gvbb

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.