GridView Styling [.Net 2.0]

Problem:  I need to have many GridView control used all over my Application and need to ensure standard look and feel across all of them.

Solution:  Use the default style templates provided out of box. This is a good way to have standard look and feel, but adds a lot of code in your aspx page which is hard to manage and looks dirty. It becomes cumbersome if the client later makes a comment saying “I do not want Blue Headers, make it Black!” you would need to change every possible GridView in your application.

A more elegant way of achieving the same would be to have your own CSS file which could be used by all the GridView across your application. Below is a sample CSS file that I often use/re-use for GridView controls

File: GridView.css

.gridView{

       width:100%;

       padding:4px;

       color:#333333;

       border:none;

}

.gridView td{}

.gridViewHeaderStyle{

       background-color:Silver;

       color:Black;

       font-weight:bold;

}

.gridViewFooterStyle{

       background-color:Silver;

       color:Black;

       font-weight:bold;

}

.gridViewRowStyle{

       background-color:#F7F6F3;

       color:#333333;

}

.gridViewAlternatingRowStyle{

       background-color:White;

       color:#404040;

}

.gridViewEditRowStyle{

       background-color:#999999;

}

.gridViewSelectedRowStyle{

       background-color:#E2DED6;

       color:#333333;

       font-weight:bold;

}

.gridViewPagerStyle{

       background-color:#284775;

       color:White;

}

.gridViewEmptyDataRowStyle{

       background-color:#FFC0C0;

       border-color:Maroon;

       border-width:1px;

       border-style:solid;

       font-weight:bold;

       vertical-align:middle;

}

Now where ever your have to place a GridView control, include this file in the page and refer the CSS clases at right places. Below is one such snippet of same:

<asp:GridView id="gridViewMessageList" Runat="server" GridLines="None" CssClass="gridView">

    <FooterStyle CssClass="gridViewFooterStyle"></FooterStyle>

    <RowStyle CssClass="gridViewRowStyle"></RowStyle>

    <EditRowStyle CssClass="gridViewEditRowStyle"></EditRowStyle>

    <SelectedRowStyle CssClass="gridViewSelectedRowStyle"></SelectedRowStyle>

    <PagerStyle CssClass="gridViewPagerStyle"></PagerStyle>

    <HeaderStyle CssClass="gridViewHeaderStyle"></HeaderStyle>

    <AlternatingRowStyle CssClass="gridViewAlternatingRowStyle"></AlternatingRowStyle>

</asp:GridView>   

 

Benefits:

1.     Maintenance is directly proportional to clarity and size of the code you write.

2.     Avoids repeatation of same styling related code across the project.

3.     Gives a single point of controling the styles across the application.

4.     Improves the performace as the Asp.Net parser now only needs to parse the CSS file once and not do the same parsing of the style for other GridView within a page again.

Problem Generalization: Not only does this apply for GridView, but for any other control we use. Try to make all the styling in CSS as far as possible.

 

 

 

Thanks & Regards,

Arun Manglick

SMTS || Microsoft Technology Practice || Bridgestone - Tyre Link || Persistent Systems || 3023-6258

 

DISCLAIMER ========== This e-mail may contain privileged and confidential information which is the property of Persistent Systems Pvt. Ltd. It is intended only for the use of the individual or entity to which it is addressed. If you are not the intended recipient, you are not authorized to read, retain, copy, print, distribute or use this message. If you have received this communication in error, please notify the sender and delete all copies of this message. Persistent Systems Pvt. Ltd. does not accept any liability for virus infected mails.