How to create a GridView Skin

When you need to have a standard gridview in your project, create a skin for the page has become a popular option. I just created my first gridview skin, it's not too hard to do.

 

3 steps:

1) create a new theme folder and skin file under App_Themes

 

2) write your skin and related CSS class

 

Example:

 

TourRezGrid.skin

 

<asp:GridView runat="server" SkinId="TourRezGrid" CssClass="TRGrid" >

    <HeaderStyle CssClass="TRGridHeader" />

</asp:GridView>

 

 

CSS file

 

/*For the TourRezGrid skin*/

/* The overall style of the GridView */

.TRGrid {border: 5px solid #DDDDDD;width: 100%;} 

 

/* When cercus move row style changes*/

.TRGrid tr:hover    { background: url('../images/bck_black_10.png'); }

.TRGrid td {background: url('../images/bck_white_75.png');border-bottom: 1px solid #DDD;line-height: 22px;padding: 4px 6px 4px 6px;}

 

/* The header of this GridView */

.TRGridHeader   { background: #DDDDDD; border-bottom: 1px solid #FFFFFF; line-height: 22px; padding: 4px 6px 4px 6px; color: #333333; white-space: nowrap; text-align: left; }

.TRGridHeader a { color:#000000;}

 

3) Adding two things in your code

 

<%@ Page Title="" Language="C#" MasterPageFile="~/Root.Master" AutoEventWireup="true" CodeBehind="ListOffice.aspx.cs" Inherits="TourRez.Users.ListOffice"

 StyleSheetTheme="GridviewTheme" %>

 

and 

 

 

<asp:GridView ID="gvListOffice" runat="server" AllowPaging="True" 

                                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" 

                                DataSourceID="gvListOfficeSqlDataSource" Width="100%" PageSize="15" 

                            SkinID="TourRezGrid">

......

</asp:GridView>