Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Feb 25, 2011 05:35 AM by mudassarkhan
Participant
840 Points
1042 Posts
Feb 18, 2011 06:09 AM|LINK
hi all,
i designed a Gridview now i want to differentiate the mouse placed row that is whenever my mouse moved over the gridview then that
row should be changed in different attractive style, how do this?
Star
13201 Points
2490 Posts
Feb 18, 2011 06:14 AM|LINK
http://csharpdotnetfreak.blogspot.com/2009/04/highlight-gridview-mouseover-javascript.html
http://www.krissteele.net/blogdetails.aspx?id=78
http://dotnetspidor.blogspot.com/2009/06/highlight-gridview-row-on-mouse-over-in.html
Hope this helps...
1210 Points
242 Posts
Feb 18, 2011 06:16 AM|LINK
Hi,
use row data bound event in gridview
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
e.Row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor; this.style.cursor='hand';this.style.backgroundColor='lightblue';";
e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=this.originalstyle;";
}
All-Star
30184 Points
4906 Posts
Feb 18, 2011 06:34 AM|LINK
See the code below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var previousColor, newColor = "red"; $("#<%=GridView1.ClientID %> tr+tr").hover( function() { previousColor = $(this).css("background-color"); $(this).css("background-color", newColor); }, function() { $(this).css("background-color", previousColor); } ); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Test A"> <ItemTemplate> test a </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Test B"> <ItemTemplate> test b </ItemTemplate> </asp:TemplateField> </Columns> <AlternatingRowStyle BackColor="Aqua" /> <RowStyle BackColor="SeaGreen" /> </asp:GridView> </form> </body> </html>
32835 Points
5563 Posts
MVP
Feb 18, 2011 06:39 AM|LINK
Hi, Check the same http://www.mikesdotnetting.com/Article/37/How-to-highlight-a-GridView's-row-on-hover http://www.codeproject.com/KB/webforms/MouseHoverUsingCSS.aspx
Feb 18, 2011 11:26 AM|LINK
i tried your code but its not working for me, (FYI i has this JQuery code in js file)
<HeaderStyle BackColor="#6D91BF" ForeColor="white" HorizontalAlign="Center" /> <RowStyle BackColor="#ecf5ff" ForeColor="#333" Font-Size="11px" Height="30px" /> <AlternatingRowStyle BackColor="white" ForeColor="#333" Height="30px" />
above its my code.
whenever the mmouse move on the rows then i want to show some attraction over there.
please help me how to do this?
Feb 18, 2011 11:32 AM|LINK
winseealn@hotmail.com asteranup thanks for your response. i tried your code but its not working for me, (FYI i has this JQuery code in js file)
If you have the jQuery in js file. Change the script to-
$(document).ready(function() { var previousColor, newColor = "red"; $("table[id*=GridView1] tr+tr").hover( function() { previousColor = $(this).css("background-color"); $(this).css("background-color", newColor); }, function() { $(this).css("background-color", previousColor); } ); });
Feb 23, 2011 11:18 AM|LINK
Anup Das Gupta just now i tried your code. but its not working.
may i know other solution please?
Feb 23, 2011 11:40 AM|LINK
I think you are missing something. See below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="js/gridview_onmouse_over_event_by_Jquery.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="test"> <Columns> <asp:TemplateField HeaderText="Test A"> <ItemTemplate> <asp:CheckBox ID="chk" runat="server" /> test a </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Test B"> <ItemTemplate> test b </ItemTemplate> </asp:TemplateField> </Columns> <AlternatingRowStyle BackColor="Aqua" /> <RowStyle BackColor="SeaGreen" /> </asp:GridView> </form> </body> </html>
JS File-
Feb 23, 2011 12:05 PM|LINK
Gupta thanks for your code.
i tried this one http://www.ezzylearning.com/tutorial.aspx?tid=2365289
its working fine
i just want to highlight the selected row in some good color. below is my code
is my style used,
may i know how to change the selected row color?
winseealn@ho...
Participant
840 Points
1042 Posts
gridview onmouse over event by Jquery
Feb 18, 2011 06:09 AM|LINK
hi all,
i designed a Gridview now i want to differentiate the mouse placed row that is whenever my mouse moved over the gridview then that
row should be changed in different attractive style, how do this?
stanly
Star
13201 Points
2490 Posts
Re: gridview onmouse over event by Jquery
Feb 18, 2011 06:14 AM|LINK
http://csharpdotnetfreak.blogspot.com/2009/04/highlight-gridview-mouseover-javascript.html
http://www.krissteele.net/blogdetails.aspx?id=78
http://dotnetspidor.blogspot.com/2009/06/highlight-gridview-row-on-mouse-over-in.html
Hope this helps...
weblogs.asp.net/stanly
Rakeshkr
Participant
1210 Points
242 Posts
Re: gridview onmouse over event by Jquery
Feb 18, 2011 06:16 AM|LINK
Hi,
use row data bound event in gridview
protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.originalstyle=this.style.backgroundColor; this.style.cursor='hand';this.style.backgroundColor='lightblue';";
e.Row.Attributes["onmouseout"] = "this.style.backgroundColor=this.originalstyle;";
}
}
---------------------------------------
Mark as Answer, if it answers you
asteranup
All-Star
30184 Points
4906 Posts
Re: gridview onmouse over event by Jquery
Feb 18, 2011 06:34 AM|LINK
Hi,
See the code below-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { var previousColor, newColor = "red"; $("#<%=GridView1.ClientID %> tr+tr").hover( function() { previousColor = $(this).css("background-color"); $(this).css("background-color", newColor); }, function() { $(this).css("background-color", previousColor); } ); }); </script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="Test A"> <ItemTemplate> test a </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Test B"> <ItemTemplate> test b </ItemTemplate> </asp:TemplateField> </Columns> <AlternatingRowStyle BackColor="Aqua" /> <RowStyle BackColor="SeaGreen" /> </asp:GridView> </form> </body> </html>Here tr+tr indicate except first tr- where first tr is the header and we do not want to get the hover effect for the header.Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
raghav_khung...
All-Star
32835 Points
5563 Posts
MVP
Re: gridview onmouse over event by Jquery
Feb 18, 2011 06:39 AM|LINK
Hi,
Check the same
http://www.mikesdotnetting.com/Article/37/How-to-highlight-a-GridView's-row-on-hover
http://www.codeproject.com/KB/webforms/MouseHoverUsingCSS.aspx
winseealn@ho...
Participant
840 Points
1042 Posts
Re: gridview onmouse over event by Jquery
Feb 18, 2011 11:26 AM|LINK
asteranup thanks for your response.
i tried your code but its not working for me, (FYI i has this JQuery code in js file)
<HeaderStyle BackColor="#6D91BF" ForeColor="white" HorizontalAlign="Center" />
<RowStyle BackColor="#ecf5ff" ForeColor="#333" Font-Size="11px" Height="30px" />
<AlternatingRowStyle BackColor="white" ForeColor="#333" Height="30px" />
above its my code.
whenever the mmouse move on the rows then i want to show some attraction over there.
please help me how to do this?
asteranup
All-Star
30184 Points
4906 Posts
Re: gridview onmouse over event by Jquery
Feb 18, 2011 11:32 AM|LINK
Hi,
If you have the jQuery in js file. Change the script to-
$(document).ready(function() { var previousColor, newColor = "red"; $("table[id*=GridView1] tr+tr").hover( function() { previousColor = $(this).css("background-color"); $(this).css("background-color", newColor); }, function() { $(this).css("background-color", previousColor); } ); });Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
winseealn@ho...
Participant
840 Points
1042 Posts
Re: gridview onmouse over event by Jquery
Feb 23, 2011 11:18 AM|LINK
Anup Das Gupta
just now i tried your code. but its not working.
may i know other solution please?
asteranup
All-Star
30184 Points
4906 Posts
Re: gridview onmouse over event by Jquery
Feb 23, 2011 11:40 AM|LINK
Hi,
I think you are missing something. See below-
HTML-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.js" type="text/javascript"></script> <script src="js/gridview_onmouse_over_event_by_Jquery.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="test"> <Columns> <asp:TemplateField HeaderText="Test A"> <ItemTemplate> <asp:CheckBox ID="chk" runat="server" /> test a </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Test B"> <ItemTemplate> test b </ItemTemplate> </asp:TemplateField> </Columns> <AlternatingRowStyle BackColor="Aqua" /> <RowStyle BackColor="SeaGreen" /> </asp:GridView> </form> </body> </html>JS File-
$(document).ready(function() { var previousColor, newColor = "red"; $("table[id*=GridView1] tr+tr").hover( function() { previousColor = $(this).css("background-color"); $(this).css("background-color", newColor); }, function() { $(this).css("background-color", previousColor); } ); });Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
winseealn@ho...
Participant
840 Points
1042 Posts
Re: gridview onmouse over event by Jquery
Feb 23, 2011 12:05 PM|LINK
Gupta thanks for your code.
i tried this one http://www.ezzylearning.com/tutorial.aspx?tid=2365289
its working fine
i just want to highlight the selected row in some good color. below is my code
is my style used,
may i know how to change the selected row color?