VKinfotek Inc.
  • Us
    About Us
    Contact Us
  • FAQs
  • Ready Software
    Ready ERP ASP Core Software for Azure Cloud
    Ready Web ERP Software
    Ready ASP.Net Azure Software
    Ready C# SQL Server Accounting Software
    Ready ASP.Net MVC and EF Software
First slide
Earn $100/hour in USA! Click Here

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

GridView Articles
  • GridView AutoGenerateColumns property
  • Bind GridView control with SqlDataSource control
  • DataBinding in a GridView control
  • Binding a GridView programmatically with dataset
  • Binding a GridView programmatically with Generic List Collection
  • Using fields with the GridView control
  • Adding Boundfields to a GridView control
  • Adding button fields to a GridView control
  • Create Templatefields in a GridView control
  • Access a value using SelectedIndexChanged() event when a row in a GridView is selected
  • How to restrict an item from being selected using GridView SelectedIndexChanging Event
  • How to add a new row in the GridView control by using the GridView footer template
  • Gridview datakeynames
  • How to select a particular row in a GridView control using SelectedDataKey method
  • GridView rowDataBound event

Become an Expert

Artificial Intelligence (AI) ERP Software Development Accounting Software ERP ASP Core

Learn More

Q1. What is Azure Platform?
GridView CommandField example
GridView and DetailsView Master/Detail page using SqlDataSource control
POCO overview and advantages - POCO class, Entity Framework in Enterprise Applications
Query entity data model using linq to entities
Difference between arraylist and list collection
How to create a Web service using Visual Studio.net
FormView DataBound Event
Calling base class constructor in C#
Convert a sequence to a generic list using ToList()method
ERP Software Development
Project ideas for students
Accounting Software
Creating an ASP.Net MVC 3 application
Using assemblies in .net applications
How to implement form validation using ASP.Net 2.0 Validation Controls
Constructors in Visual Basic.Net
People also viewed: cover image of book develop erp software using asp core and deploy to Azure Create your own ERP Software using ASP Core>>


  • SITEMAP
  • Terms of use
  • Testimonials

Back to top

Copyright © 2018 - All Rights Reserved - VKInfotek.com