Formatting an Online Shopping Cart/PayPal System - Making it Pretty
(Page 2 of 4 )
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:
Property Name | Description |
CssClass | The master style to be applied |
BorderStyle-CssClass | Styles the border |
RowStyle-CssClass | Applied to every other row |
AlternatingRowStyle-CssClass | Applied to every other row i.e. The alternative rows of the above |
ControlStyle-CssClass | The controls shown inside the GridView such as the edit button |
EditRowStyle-CssClass | When a row is being edited it will use this style which can be handy for highlighting it |
SelectedRowStyle-CssClass | Once a row is selected it will have this style applied to it |
EmptyDataRowStyle-CssClass | Before there is any data in the GridView it will show a single empty row, this style controls that rows appearance |
FooterStyle-CssClass | Surprisingly this controls the appearance of the footer |
HeaderStyle-CssClass | Even more surprisingly, this controls the appearance of the header |
PagerStyle-CssClass | You can use this to set how the page number links will look. In the demonstration this is used with the product listing to center align the page numbers |
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."
Next: Padding and Spacing >>
More C# Articles
More By Tann San
