Formatting GridView control with CSS

Using style elements to format the GridView is easy but can result in lower performance. Instead, we can use Cascading Style Sheets to format the GridView control. The following example demonstrates how we can format GridView control using Cascading Style Sheets.

<%@ Page Language=” C#” %>
<head runat=”server”>
<title>Untitled Page</title>
<style type=”text/css”>

.headerStyle 
{
    background-color: #FF6600;
    color: #FFFFFF;
    font-size: 8pt;
    font-weight: bold;
}

.itemStyle
{
    background-color: #FFFFEE;
    color: #000000;
    font-size: 8pt;
}

.alternateItemStyle
{
    background-color: #FFFFFF;
    color: #000000;
    font-size: 8pt;
}
</style>
</head>
<body>
<form id=”form1" runat=”server”>
<div>
<asp:gridview id=”ItemsGridView” datasourceid=”myDataSource”  
AutoGenerateColumns=”false”  DataKeyNames=”ItemID” runat=”server”>
<Columns>
	<asp:BoundField DataField=”ItemID” HeaderText=”Item ID” ReadOnly=”true”  
    ItemStyle-Width=”100px” ItemStyle-CssClass=”itemStyle”/>
	<asp:BoundField DataField=”ItemName” HeaderText=”Item Name” ReadOnly=”true”  			
    ItemStyle-Width=”100px”/><asp:BoundField DataField=”ClStk” 
    HeaderText=”Item closingStock” 	ReadOnly=”true”  ItemStyle-Width=”100px”/>
</Columns>
<AlternatingRowStyle CssClass=”alternateItemStyle” />
<HeaderStyle CssClass=”headerStyle” />
</asp:gridview>
<asp:SqlDataSource ID=”MyDataSource”  
ConnectionString=”<%$Connectionstrings:ERPConnectionString%>”
SelectCommand=”SELECT ItemID,ItemName,ItemType,ClStk FROM ItemTable” 
runat=”server”/>
</div>   
</form>
</body>

In the above example, the header has been modified using the class .headerStyle. The alternate rows of the GridView control have been modified using the class .alternateItemStyle and the background color has been modified using the class .itemStyle.