Asp.Net GridView Alternating
Row styles like bgcolor, color, font, padding, spacing etc can be set using
jQuery by adding appropriate style classes to the row of the Grid as follows.
Example
<script type="text/javascript"
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<link type="text/css"
href="Stylesheet.css"
rel="Stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
//
// Add Grid Style
$("#grdEmployee").addClass("Grid");
//
// Add Grid Cell Style
$("#grdEmployee
td").addClass("GridCell");
//
// Add Header
Style
$("#grdEmployee
th").addClass("GridHeader");
//
// Add Alternating Row Style
$("#grdEmployee
tr").filter(":even").addClass("GridRowEven");
$("#grdEmployee
tr").filter(":odd").addClass("GridRowOdd");
});
</script>
<asp:GridView
<asp:GridView
ID="grdEmployee"
runat="server"
AutoGenerateColumns="true"></asp:GridView>
Add your logic in codebehind to populate the Grid with data.
Stylesheet.css
.Grid
{
border: 1px solid #000000;
}
.GridCell
{
padding: 3px 3px 3px 3px; /* Cellpadding */
border: 1px solid #000000;
font-family:Verdana;
font-size:10pt;
}
.GridHeader
{
background-color:#999966;
}
.GridRowEven
.GridRowEven
{
background-color:#ffffcc;
}
.GridRowOdd
{
background-color:#FEDCBA;
}
No comments:
Post a Comment