Decorate Your GridView Control With Or Without Using CSS:
In this article I will you show you how to decorate GridView Control with or without using CSS?
Here is my ASPX Page Code:
<asp:GridView ID="GridView1" runat="server" Font-talic="True"
Font-Names="Times New Roman" Font-Size="Medium">
<RowStyle BackColor="Silver" />
<HeaderStyle BackColor="#B8B0D7" BorderColor="#999999" />
<AlternatingRowStyle BackColor="#A7A098" />
</asp:GridView>
Steps to decorate Your Grid Control Without Using CSS:-
- Drag and drop an grid control in your aspx page and give data connectivity as shown below.
- Come to design view page and click your Grid Control and press F4 to display its properties.
- Expand and customize the following properties of grid control and decorate your own Grid Control
The properties are:
a) AlternatingRowStyle:- This attribute is used to customize the alternate row display of your grid control.This will have sub properties like border color,font style etc.
If you don’t find comfort in customizing your grid using Properties of GridControl means,similar to other controls,you can use your own css style and use it in your grid control as shown below:-
StyleSheet.css:
.grid
{
/*background-image: url( 'blueswirly.jpg' ); */
background-color: #C6EAFF;
font-family: Times New Roman;
font-style: italic;
font-size: medium;
border-style: dotted;
text-transform: capitalize;
}
In order to use the above css file, incluse this line in your aspx page in the <head></head> tag:-
<linkhref="StyleSheet.css"rel="Stylesheet"type="text/css"/>
Don’t forget to include CssClass property in the grid control as shown below:-
<asp:GridView ID="GridView1" CssClass="grid" runat="server" Font-talic="True"
Font-Names="Times New Roman" Font-Size="Medium">
<RowStyle BackColor="Silver" />
<HeaderStyle BackColor="#B8B0D7" BorderColor="#999999" />
<AlternatingRowStyle BackColor="#A7A098" />
</asp:GridView>
Happy Coding.Explore more and more as much as possible.
Leave Comment