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.

screenshot of gridview which is customized using the code given above



cover image of azure cloud book

Create an Azure Cloud Software Application

View Highlights » View Contents »
cover image of foundation database programming book

Create your Own Accounting Software

View Highlights » View Contents »
cover image of ERP book

Create your Own ERP Software

View Highlights » View Contents »
cover image of asp.net book

Create your Own WEB ERP Software using ASP.Net

View Highlights » View Contents »
cover image of entity framework book

Create your Own Entity Framework Application (SOM System)

View Contents »
cover image of Android book

Create your Own Android Database Application (SOM System)

View Contents »