Formatting ASP.NET GridView using jQuery

In this post, we will see how easily we can assign alternate background color of ASP.NET Grid Views rows using jQuery. In this example, we will assign grey color to all the odd rows of GridViews. When I say Odd, that means Rows which are having odd numbers like Row1, Row3, Row5 etc. 

Let's take a ASP.NET Grid View Control and placed it on ASP.NET Page with ID "gdRows". See below.

1	<asp:GridView ID="gdRows" runat="server">

2	</asp:GridView>

jQuery provides a selector ":odd" which selects only odd elements. So we need to filter out all the odd rows and assign the color. To filter the rows, we will use filter() method of jQuery, which takes selector as argument and returns the elements which matches the selector. See below jQuery Code.

1	$(document).ready(function() {

2	$("#<%=gdRows.ClientID%> tr").filter(":odd").css("background-color","grey");

3

});

You can also use ":even" selector to assign other than default color to grid view rows.

1	$(document).ready(function() {

2	$("#<%=gdRows.ClientID%> tr").filter(":even").css("background-color","blue");

3

});

Feel free to contact me for any help related to jQuery, I will gladly help you.

source : http://jquerybyexample.blogspot.com/2011/06/formatting-aspnet-gridview-using-jquery.html

Highlight row on mouseover in GridView using jQuery

 I will show you that how to highlight a gridview row on mouseover. See below image. (the image is not showing the mouse cursor, but the cursor is on 3rd row.)



All we need to do is that on mouseover on gridview rows assign any CSS and on mouseout, remove that CSS. Rather than using mouseover and mouseout method seperately, jQuery provides another method named "hover()" which serves purpose of both the methods. Please read more here abouthover(). 

Below jQuery code, will find all the rows of gridview and using hover method it will assign "LightGrey" color on mouseover and then assign "White" color on mouseout.

1	$(document).ready(function() {

2	$("#<%=gdRows.ClientID%> tr").hover(function() {

3	$(this).css("background-color", "Lightgrey");

4	}, function() {

5	$(this).css("background-color", "#ffffff");

6

});

7

});

If your default backgroud color for row is other than white then put that color code instead of white. Simple and cool... Isn't it?

But there is a problem with this code. That is it will assign the mouseover and mouseout effect on header row as well. Try it yourself with above code. So how to resolve it? Well, we need to change above code little bit so that it finds only those rows which are having "td", not "th". To do this, we can use "has" selector of jQuery to find out all the rows which have td. See below jQuery code.

1	$(document).ready(function() {

2	$("#<%=gdRows.ClientID%> tr:has(td)").hover(function() {

3	$(this).css("background-color", "Lightgrey");

4	}, function() {

5	$(this).css("background-color", "#ffffff");

6

});

7

});

Hope you find this post useful.

source : http://jquerybyexample.blogspot.com/2011/06/highlight-row-on-mouseover-in-gridview.html