Step 1
Download JQuery jquery-1.6.1.min.js
Step 2
Create a Web Application and give the Solution name as SolFormattingGridView_Jquery
Step 3
Add a grid view control on page it is look like this
<div>
<asp:GridView ID="GvDeveloper" runat="server" >
</asp:GridView>
</div>
Step 4
Add jQuery file Reference inside the head tag of the page
<head runat="server">
<title>Formatting GridView using Jquery</title>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
Step 5
Create a CSS for formatting GridView.
<style type="text/css">
.HeaderColor
{
background-color:#292421;
color:#FFFAFA;
}
.AlterNativeRowColor
{
background-color:#EEC591;
}
.DefaultRowColor
{
background-color:#9C661F;
}
</style>
Step 6
Write a JQuery script for formatting a gridview.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Header Color
$("#GvDeveloper th").addClass("HeaderColor");
// Alternative Row Color
$("#GvDeveloper tr").filter(":odd").addClass("AlterNativeRowColor");
// Default Row Color
$("#GvDeveloper tr").filter(":even").addClass("DefaultRowColor");
});
</script>
jQuery provides ":odd" and ":even" selector. ":odd" selector which selects only odd elements. ":even" selector which selects even elements.
in short Rows which are having odd numbers like Row1, Row3, Row5 etc. and even number like Row2,Row4,Row6 etc.
So we need to filter out all the odd rows and even rows for 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.
then Adds the specified css classes to each of the set of matched elements.
Full Code
.aspx Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Formatting GridView using Jquery</title>
<style type="text/css">
.HeaderColor
{
background-color:#292421;
color:#FFFAFA;
}
.AlterNativeRowColor
{
background-color:#EEC591;
}
.DefaultRowColor
{
background-color:#9C661F;
}
</style>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Header Color
$("#GvDeveloper th").addClass("HeaderColor");
// Alternative Row Color
$("#GvDeveloper tr").filter(":odd").addClass("AlterNativeRowColor");
// Default Row Color
$("#GvDeveloper tr").filter(":even").addClass("DefaultRowColor");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GvDeveloper" runat="server" >
</asp:GridView>
</div>
</form>
</body>
</html
Download JQuery jquery-1.6.1.min.js
Step 2
Create a Web Application and give the Solution name as SolFormattingGridView_Jquery
Step 3
Add a grid view control on page it is look like this
<div>
<asp:GridView ID="GvDeveloper" runat="server" >
</asp:GridView>
</div>
Step 4
Add jQuery file Reference inside the head tag of the page
<head runat="server">
<title>Formatting GridView using Jquery</title>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
</head>
Step 5
Create a CSS for formatting GridView.
<style type="text/css">
.HeaderColor
{
background-color:#292421;
color:#FFFAFA;
}
.AlterNativeRowColor
{
background-color:#EEC591;
}
.DefaultRowColor
{
background-color:#9C661F;
}
</style>
Step 6
Write a JQuery script for formatting a gridview.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Header Color
$("#GvDeveloper th").addClass("HeaderColor");
// Alternative Row Color
$("#GvDeveloper tr").filter(":odd").addClass("AlterNativeRowColor");
// Default Row Color
$("#GvDeveloper tr").filter(":even").addClass("DefaultRowColor");
});
</script>
jQuery provides ":odd" and ":even" selector. ":odd" selector which selects only odd elements. ":even" selector which selects even elements.
in short Rows which are having odd numbers like Row1, Row3, Row5 etc. and even number like Row2,Row4,Row6 etc.
So we need to filter out all the odd rows and even rows for 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.
then Adds the specified css classes to each of the set of matched elements.
Full Code
.aspx Code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Formatting GridView using Jquery</title>
<style type="text/css">
.HeaderColor
{
background-color:#292421;
color:#FFFAFA;
}
.AlterNativeRowColor
{
background-color:#EEC591;
}
.DefaultRowColor
{
background-color:#9C661F;
}
</style>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
// Header Color
$("#GvDeveloper th").addClass("HeaderColor");
// Alternative Row Color
$("#GvDeveloper tr").filter(":odd").addClass("AlterNativeRowColor");
// Default Row Color
$("#GvDeveloper tr").filter(":even").addClass("DefaultRowColor");
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GvDeveloper" runat="server" >
</asp:GridView>
</div>
</form>
</body>
</html
