Monday, July 23, 2012

Asp.Net jQuery GridView Alternating Row Style


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"
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
   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
{
    background-color:#ffffcc;
}
.GridRowOdd
{
    background-color:#FEDCBA;
}




Search Flipkart Products:
Flipkart.com

No comments: