Glassy Black GridView Theme

Live Demo

Overview

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.

Installation

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">
<Columns>
<!-- Bound field parameters go here -->
</Columns>
<RowStyle CssClass="RowStyle" />
<EmptyDataRowStyle CssClass="EmptyRowStyle" />
<PagerStyle CssClass="PagerStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<EditRowStyle CssClass="EditRowStyle" />
<AlternatingRowStyle CssClass="AltRowStyle" />
</asp:GridView>

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" />
</head>

And here is the CSS:

/*GridViewCSS*/
.GridViewStyle
{
font-family: Arial, Sans-Serif;
font-size:small;
table-layout: auto;
border-collapse: collapse;
border: #1d1d1d 5px solid;
}
/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
background-image: url(Images/HeaderGlassBlack.jpg);
background-position:center;
background-repeat:repeat-x;
background-color:#1d1d1d;
}
.HeaderStyle th
{
padding: 5px;
color: #ffffff;
}
.HeaderStyle a
{
text-decoration:none;
color:#ffffff;
display:block;
text-align:left;
font-weight:normal;
}
.PagerStyle table
{
text-align:center;
margin:auto;
}
.PagerStyle table td
{
border:0px;
padding:5px;
}
.PagerStyle td
{
border-top: #1d1d1d 3px solid;
}
.PagerStyle a
{
color:#ffffff;
text-decoration:none;
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
{
font-weight:bold;
color:#FFFFFF;
text-decoration:none;
padding:2px 10px 2px 10px;
}
/*RowStyles*/
.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!

Published Sunday, February 24, 2008 2:39 PM by Kevin Brammer
Filed under:

Comments

# re: Glassy Black GridView Theme

Sunday, February 24, 2008 11:43 PM by rrobbins

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

# re: Glassy Black GridView Theme

Monday, February 25, 2008 2:01 AM by John Walker

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

# re: Glassy Black GridView Theme

Monday, February 25, 2008 7:09 AM by Kevin Brammer

Hi Bacardi,

>>>>>>>I am actually trying to incorporate some new ui styles into some of my projects. BTW, where can one find the glossy images?

There is only one image used - you can find it with the link provided at the end of the post.

Thanks,

Kevin

# re: Glassy Black GridView Theme

Monday, February 25, 2008 7:11 AM by Kevin Brammer

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.

Thanks,

Kevin

# re: Glassy Black GridView Theme

Tuesday, February 26, 2008 1:25 AM by John Walker

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!

# re: Glassy Black GridView Theme

Thursday, February 28, 2008 1:25 AM by John Walker

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.

# re: Glassy Black GridView Theme

Wednesday, April 2, 2008 4:12 PM by Andre Ferreira

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

# re: Glassy Black GridView Theme

Friday, April 11, 2008 2:39 PM by The Big Kahuna

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!

# re: Glassy Black GridView Theme

Tuesday, April 15, 2008 4:58 PM by Chintan

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

# re: Glassy Black GridView Theme

Tuesday, June 3, 2008 3:04 AM by sobinscott

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

# re: Glassy Black GridView Theme

Tuesday, June 3, 2008 9:37 AM by Kevin Brammer

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:

<PagerStyle CssClass="PagerStyle" />

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

<tr class="PagerStyle">

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.

# re: Glassy Black GridView Theme

Friday, June 20, 2008 4:51 PM by HDW

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

# re: Glassy Black GridView Theme

Friday, April 10, 2009 12:21 AM by Xeilok

Thanks very much! Much appreciated!

# re: Glassy Black GridView Theme

Wednesday, May 6, 2009 9:33 AM by junk1

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 asp.net developers.

# re: Glassy Black GridView Theme

Saturday, July 25, 2009 6:33 AM by diffy

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!

Thanks!

# re: Glassy Black GridView Theme

Thursday, March 10, 2011 8:06 PM by Chit Min Maung

www.cyberslingers.com/.../Glassy-Black-GridView-Theme.aspx

# re: Glassy Black GridView Theme

Wednesday, June 13, 2012 12:53 AM by Vinoth

Hey Good article i am new to asp.net 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..

# re: Glassy Black GridView Theme

Monday, July 23, 2012 10:55 AM by Varun

Please provide me the link to download these themes

# re: Glassy Black GridView Theme

Sunday, August 26, 2012 4:40 AM by Hemant

Dear

Links are not working