Thank you for reply Mr.Asteranup This animation worked. But when stoping the move mouse yellow bacground toggled. Actually i need highlight row my gridview. In this case your jquery codes working good. By the way i need add delay when user stoping move mouse/onmousing
over row. you can check what i need screencast from
this link.
omerdemir
Member
271 Points
528 Posts
JavaScript Change Class dont work with alternateColor row!
May 13, 2012 12:57 PM|LINK
Hi!
I Highlihting rows with javascript. But when i setting AlternatingRowStyle javascript change class function dont work?
Why?
Thanks in advance
asteranup
All-Star
30184 Points
4906 Posts
Re: JavaScript Change Class dont work with alternateColor row!
May 14, 2012 05:12 AM|LINK
Hi,
You can check this post-
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <style> td{padding:10px;} </style> <script type="text/javascript"> var oldcolor; $(document).ready(function () { $("table tr:odd").css("background-color", "red"); $("table tr:even").css("background-color", "gray"); $("table tr").mouseover(function () { oldcolor = $(this).css("background-color"); $(this).css("background-color", "yellow"); }); $("table tr").mouseout(function () { $(this).css("background-color", oldcolor); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <div> <span><%#Eval("State_Name")%></span><br /> <span><%#Eval("Country_Name")%></span> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>protected void Page_Load(object sender, EventArgs e) { var dataSource = (new[] { new { State_Name = "State_Name 1", Country_Name = "Country_Name 0" } }).ToList(); dataSource.Add(new { State_Name = "State_Name 2", Country_Name = "Country_Name 1" }); dataSource.Add(new { State_Name = "State_Name 3", Country_Name = "Country_Name 2" }); dataSource.Add(new { State_Name = "State_Name 4", Country_Name = "Country_Name 3" }); dataSource.Add(new { State_Name = "State_Name 5", Country_Name = "Country_Name 4" }); dataSource.Add(new { State_Name = "State_Name 6", Country_Name = "Country_Name 5" }); dataSource.Add(new { State_Name = "State_Name 7", Country_Name = "Country_Name 6" }); DataClass.bindDataToGrid(GridView1, dataSource); }Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
omerdemir
Member
271 Points
528 Posts
Re: JavaScript Change Class dont work with alternateColor row!
May 21, 2012 07:23 AM|LINK
Hello
Thank you for your post. Can you add this jquery delay?
I mean when user onmouseout of last hovered row delaying 1000sc.?
asteranup
All-Star
30184 Points
4906 Posts
Re: JavaScript Change Class dont work with alternateColor row!
May 21, 2012 08:19 AM|LINK
Hi,
I think you are looking for animation file below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> <style> td{padding:10px;} </style> <script type="text/javascript"> var oldcolor; $(document).ready(function () { $("table tr:odd").css("background-color", "red"); $("table tr:even").css("background-color", "gray"); $("table tr").mouseover(function () { oldcolor = $(this).css("background-color"); $(this).css("background-color", "yellow"); }); $("table tr").mouseout(function () { $(this).animate({ backgroundColor: oldcolor }, 1000); }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server"> <Columns> <asp:TemplateField> <ItemTemplate> <div> <span><%#Eval("State_Name")%></span><br /> <span><%#Eval("Country_Name")%></span> </div> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
omerdemir
Member
271 Points
528 Posts
Re: JavaScript Change Class dont work with alternateColor row!
May 22, 2012 02:21 PM|LINK
Thank you for reply Mr.Asteranup This animation worked. But when stoping the move mouse yellow bacground toggled. Actually i need highlight row my gridview. In this case your jquery codes working good. By the way i need add delay when user stoping move mouse/onmousing over row. you can check what i need screencast from this link.