Home > DeveloperSection > Articles > GridView Decoration in ASP.Net

GridView Decoration in ASP.Net


ASP.Net ASP.Net 
Ratings:
0 Comment(s)
 16333  View(s)
Rate this:

GridView Decoration in ASP.Net

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?

GridView using CSS in ASP.Net

 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:-

  1. Drag and drop an grid control in your aspx page and give data connectivity as shown below.
  2. Come to design view page and click your Grid Control and press F4 to display its properties.
  3. 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.

 

b)      EditRowStyle:- This attribute is used to customize the row which when displayed by clicking the Edit Row button in your grid control(Used when command field/template field is used.

 

c)       FontStyle:- Used to customize the font style of the row being displayed in Grid Control

d)      FooterStyle:- Used to display the footer style of the grid being displayed.

e)      HeaderStyle:- Used to display the header style of the grid being displayed.

f)       PagerSettings:- Used to customize the pagerSettings style of the grid.

g)      SelectedRowStyle:- Used to customize the selected row style of the grid being displayed (Used when command field/template field is used.)

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:-

<link href="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.


Don't want to miss updates? Please click the below button!

Follow MindStick