Introduction:
Here I will explain how to highlight gridview rows based on mouseover and mouseout using JavaScript in asp.net.
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 Email
|
|||
12 comments :
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
Thanks Man
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
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
All the articles and demos shown on this site works greatly..:)
lovely.....nice
You could do it simply with CSS. There is special :hover pseudoclass for it...
TR:hover
{
background-color = '#ffeb95';
/* apply other styles here */
}
Nice>..........
Nice way.....
hi suresh sir... i want help.... i want code of stenography which is password protected in c#.net ... may you help me.. ????
GB gvbb
GB gvbb
Note: Only a member of this blog may post a comment.