Formatting an Online Shopping Cart/PayPal System

Introduction

I've used the DataGrid in almost every commercial C# .net project to date, so when I started hearing about the GridView and how it would take out a chunk of the work I kept doing I leaped at the chance to use it.  Both the DataGrid and the GridView are classes that allow you to easily and quickly display tabular data.  They both get rendered to HTML tables when viewed online.

This is the third article in a series exploring the GridView and demonstrating some of its usages via a simple shop demo.  Each article is going to use the same source files which you can grab at the link above. To view the demo just unzip everything into a new directory on your web server and browse to the directory name.  For example, if you unzipped it all into a directory called "gridviewshop" in the root of your web server you would navigate to:

http://www.yourserver.com/gridviewshop

If everything worked okay you should see a site looking like this:

In the previous segment we covered how to control the creation of the GridView's DataSource, which in the demonstration shop's case is a DataTable stored and accessed from the Session state. The first article covered how to use this data to populate the GridView, so now we just have to make it match our design scheme.  Here you can see what the two GridViews would look like with no styling:

Making it Pretty

Formatting the GridView is pretty straightforward with the help of a little CSS.  One thing to keep in mind is that the GridView will get rendered as an HTML table, so if you have any global table styles applied they will affect its appearance, unless you specify a CSS class property for the GridView that will be defined after the global table style in your CSS file. Here's a handy little table with all the CSS fields you can assign to a GridView:

All of these except the main CssClass are shortcuts into the equivalent table item style. For example, here's the full RowStyle tag:

  <rowstyle backcolor="Black" forecolor="White"
CssClass="gvRowStyle" />

It's perfectly okay to set a CssClass and a TableItemStyle like the above for the same item such as the RowStyle. Setting the style using the method above will create the equivalent CSS properties inline on the page, and will therefore overwrite the same property that might be defined in the specified CSS class.  Here's the HTML that will be generated if we used the line above:

  <tr class="gvRowStyle" style="color:White;background-
color:Black;">

The rows would all have a black background and white text regardless of what we specified in the gvRowStyle class.

You could leave out the CssClass entirely and just set the colors and other properties directly with the table item style tags, although this will mean having some design elements on your main HTML page and not in the CSS files with your other bits and pieces. Setting the design properties like this also adds a lot of repeating text to your pages because the row declaration will be repeated in full for each row.

Borders

You can access the HTML tables border attribute via the GridView's GridLine property. You can set this to "None," "Horizontal," "Vertical" or "Both" to control the border lines.  Both the GridViews in the demonstration have their GridLines property set to "None."  You can further control the borders via CSS, in which case you probably want to set the GridLine property to "None."

Padding and Spacing

If you want to add some space around your rows' content you can implement the CellPadding property, which takes an integer value which simply specifies the amount of room to pad each cell with. This was used on the product listing to space things out, as otherwise the images seemed to run together with the border hidden. There's also the CellSpacing property, which will put space between each cell. The difference is that with padding the cell is grown and its background color and border will be stretched. With spacing this is not the case and you will see the page background (or table background if one is specified) between each cell. They say a picture is worth a thousand words, so here are two screenshots; the first is using CellPadding and the other is using CellSpacing:

CellPadding

CellSpacing

I altered the color of the alternate row so the difference between padding and spacing was clearer.  With the shop design padding was the obvious choice as spacing looks pretty bad, but this really depends on how you implement everything.  On another project spacing might be the appropriate choice.

Captions

If you want to display a caption inside the final rendered table you can easily do so via the Caption and CaptionAlign property:

  Caption="Shopping Basket Table"
  CaptionAlign="Left"

The caption can be used to give your viewers a quick reference to what the table shows and should be kept short.  If you want to provide a deeper explanation for visually impaired users you can use the Summary property.  Wait a minute, there is no summary property for the GridView!  Okay you caught me, there isn't one, but that doesn't stop you putting one there.  There's nothing stopping you from putting the following inside the GridView declaration:

  summary="The shopping basket table is used to show the various items you have chosen from this shop"

It will still get rendered to the page like this:

<table class="shopgrid" cellspacing="0" cellpadding="10" summary="The shopping basket table is used to show the various items you have chosen from this shop" Cheese="Good" border="0" id="gvBasket" style="border-collapse:collapse;">

You can pass a lot of items through like this, which is great.  You can see how the all important cheese attribute has been passed through with no problems.  If you've never used the Caption or Summary attributes before you should check out what the W3C has to say on them here.  As a side note, the caption's "align" property has been deprecated, so you might want to avoid using the GridView's CaptionAlign property.

Product Paging

"Paging" is the process of splitting up the displayed data onto multiple pages and providing navigation between each of them.  This can be handled in several ways, and everyone who's used it has their preferred methods.

Sometimes it comes down to the DataSource you're using.  Some databases such as PostgreSQL let you perform select queries and return x number of results starting at offset y, so you can do paging directly from your database, which is excellent if you have hundreds, thousands or possibly millions of records to sort through. This feature is not supported by a lot of other database systems, so you can be creative by implementing your own paging on a database with some where clause trickery, or if all else fails and you've had to pull all the records you can still sort them on the server side with the PagedDataSource class. This is pretty neat, but if you're having trouble getting your head around DataTables and DataSets or you're just short on time, you can quickly implement paging with the GridView.  Paging is enabled on the product listing via:

  AllowPaging="True"

and has the number of items to show per page specified with:

  PageSize="3"

There are six products in the demonstration shop so you can see two page links at the bottom of the GridView.

Conclusion

With this article we've looked at how to stylize the GridView to make it fit in with our site design using a number of techniques, including both inline and externally defined CSS as well as directly setting some of the HTML tables attributes. There's a whole host of other properties that can be set to alter the GridView's appearance, which you can see listed here at the MSDN site. Remember that you can pass your own table properties through the GridView, such as the summary property we passed earlier, so you're not restricted to what you can see listed on the GridView property page.

If you're not sure something has been passed correctly, remember that you usually have the "View Source" option with your browser.  For IE and Opera you can right click the page and pick "View Source" or do View->Source from the main menu at the top.  It's similar for FireFox, except on the right click menu it's called "View Page Source" and with the main menu it's View->Page Source.  It's always nice to see what's going on under the hood, as it might give you further insights into better ways to optimize your code.

You've now walked through how to create the DataSource, how to populate your GridView using that data and finally how to decorate it all to tie in with your site's design.  Hopefully you've also learned a few of other handy tips which should help you along the way.