Glassy Black GridView Theme

Live Demo


I have been following Matt Berseth's posts covering DataGrid designs and decided to try a create my own theme. This theme is entirely CSS based on a standard GridView control using .NET 2.0. I've only tested it with Firefox 2 and IE7 so far, so there may be some lingering CSS issues to resolve.


Once you drag a default GridView onto the page, you will need to set the appropriate CSSclass for the GridView and each RowStyle as well as set GridLines to None:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
AutoGenerateColumns="False" CssClass="GridViewStyle" GridLines="None">
<!-- Bound field parameters go here -->
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />

If you do not already have a stylesheet attached to your page, you will need to create one using "Add New Item" and make sure it is referenced in the <head> of you web page. Assuming you named your stylesheet the default "Stylesheet.css", your <head> tag should look something like this:

<head runat="server">
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />

And here is the CSS:

font-family: Arial, Sans-Serif;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 5px solid;
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
background-image: url(Images/HeaderGlassBlack.jpg);
.HeaderStyle th
padding: 5px;
color: #ffffff;
.HeaderStyle a
.PagerStyle table
.PagerStyle table td
.PagerStyle td
border-top: #1d1d1d 3px solid;
.PagerStyle a
padding:2px 10px 2px 10px;
border-top:solid 1px #777777;
border-right:solid 1px #333333;
border-bottom:solid 1px #333333;
border-left:solid 1px #777777;
.PagerStyle span
padding:2px 10px 2px 10px;
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td /*Common Styles*/
padding: 5px;
border-right: solid 1px #1d1d1d;
.RowStyle td
background-color: #c9c9c9;
.AltRowStyle td
background-color: #f0f0f0;
.SelectedRowStyle td
background-color: #ffff66;

The last step is to create a folder in your root directory titled "Images" and add the background image "HeaderGlassBlack.jpg" to it. That should do it!


  • Very nice! I would like to see more design ideas for the various web controls.

  • Nice look and simple implementation. Gonna use it. Thanks!

  • Hi rrobins,
    >>>>>Very nice! I would like to see more design ideas for the various web controls.

    I plan on doing a few more posts on themes, so stay tuned.


  • Kevin,

    Do you have any tips on creating the HeaderGlassBlack.jpg gradient image? I not too bad with Paint.NET, but if you have any pointers, that would be great, or web resources. Thanks!

  • Kevin,

    Thanks for the detailed response. Based on your reply and having a look at you existing image, I was able to build a sweet blue-tinted version for my own application. Awesome stuff. Thanks.

  • Pretty nice, I like it alot, keep up the good work

  • Kevin,
    Thanks so much. I searched high and low for this and all the other sites were confusing. I had your image up and working in under 2 minutes and now I am CSS styling all my gridviews.

    You DA BOMB!

  • By any chance ... are you making more of these ... soon ?

  • Hi Kevin,
    Very cool Theme.But I am not getting the page number theme as yours .What I get is mere numbers. And the selected page number is invisible.Also I am not getting the boxes around the page numbers as yours....Why? plz reply..

  • Hi sobinscott,

    Hmmmm... I am using the default ASP.NET 2.0 GridView, so you might have to make adjustments for .NET 3.5 or CSS Friendly Adapters. You probably have already done this, but double check that your original GridView declaration matches the one above - especially the line that reads:

    &lt;PagerStyle CssClass="PagerStyle" /&gt;

    Also, right-click and view source in the browser to make sure the last table row declaration matches:

    &lt;tr class="PagerStyle"&gt;

    This example only works for the numeric paging, so you may need to check that as well. I am considering working on a version using the CSS Friendly Adapters or a similar solution, which should (hopefully) make this easier to implement.

  • Just wanted to say thanks for making and sharing these. I found them very helpful in learning to customize a Gridview.

  • Thanks very much! Much appreciated!

  • Why do you link css in the header? If you put it next to the .skin file in the App_Themes\YourTheme folder, it will be linked automaticly. I think that's better, because when you change the theme of your site, the css will change too.

    I guess you know that already but should mention for not experienced developers.

  • Thank you SO MUCH for posting this professional looking gridview code. It's terrific that experienced developers such as yourself share your expertise with us novices. This is really great!


  • Hey Good article i am new to can u pls tel me the code for sorting and i cant able to move 2 page data.
    Server Error in '/' Application.
    The GridView 'GridView1' fired event PageIndexChanging which wasn't handled.
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.Web.HttpException: The GridView 'GridView1' fired event PageIndexChanging which wasn't handled.

    Source Error:

    An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

    Stack Trace:

    [HttpException (0x80004005): The GridView 'GridView1' fired event PageIndexChanging which wasn't handled.]
    System.Web.UI.WebControls.GridView.OnPageIndexChanging(GridViewPageEventArgs e) +1346798
    System.Web.UI.WebControls.GridView.HandlePage(Int32 newPage) +86
    System.Web.UI.WebControls.GridView.HandleEvent(EventArgs e, Boolean causesValidation, String validationGroup) +464
    System.Web.UI.WebControls.GridView.RaisePostBackEvent(String eventArgument) +207
    System.Web.UI.WebControls.GridView.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument) +10
    System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument) +13
    System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData) +175
    System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +1565

    like this error occur..

  • Please provide me the link to download these themes

  • Dear

    Links are not working

Comments have been disabled for this content.