An Extensive Examination of the DataGrid Web Control: Part 2

The Second in a Multi-Part Series

This article is the second piece of a multi-part series on using the DataGrid Web control that will span several weeks. The ASP.NET DataGrid Web control, which displays database information in an HTML table, is highly versatile. The basics of the DataGrid were discussed in Part 1. This article will examine how to perform custom formatting of the DataGrid. Read Part 3 Read Part 4 Read Part 5 Read Part 6 Read Part 7 Read Part 8 Read Part 9 Read Part 10 Read Part 11 Read Part 12 Read Part 13 Read Part 14 Read Part 15 Read Part 16 Read Part 17 Read Part 18

Introduction

<asp:datagrid runat="server" />

Pretty simple. Unfortunately this simple approach renders a fairly ugly DataGrid. As we saw from this live demo, the resulting DataGrid is little more than a vanilla HTML table encapsulating all of the columns and rows present in the DataReader.

What we'd like to be able to do is display only certain columns from the DataReader, and specify each column's format. Also, we'd like to be able to specify some table-wide formatting settings, such as the background color, the font, etc. Finally, it would be nice to be able to add some custom headings for each column, perhaps giving the heading a different background color or a bolded font. In this part we'll examine how to do all of these tasks! (The DataGrid can do so much more, as we'll see in future parts to this article series, such as paging through database results, allowing users to sort the data, etc. These topics are for a future article, though!)

Specifying DataGrid Formatting Options

<%@ Import Namespace="System.Drawing" %> <script runat="server"> sub Page_Load(sender as Object, e as EventArgs) ... DataGridID.BackColor = Color.Red ... end sub </script>

The other method you can use to set display properties is to specify them in the DataGrid Web control tag. For example, the following code has the same effect as the above code:

<asp:datagrid runat="server" BackColor="Red" />

Personally I prefer the latter method. I find specifying the display properties in the Web control tag itself to be cleaner than the server-side code alternative. (For the server-side code approach note that we needed to import the System.Drawing namespace and refer to the color as Color.Red; with specifying the display properties in the Web control tag we just needed to say BackColor="Red". I find this saving of typing to be more readable.)

Let's look at some of the useful formatting settings we can apply to our DataGrid. The ones I think you'll find most useful are:

• BackColor - specifies the background color.
• Font - specifies the font information for the DataGrid. Font information includes things like the font family, the point size, if its bold, italicized, etc.
• CellPadding - specifies the cellpadding of the HTML table
• CellSpacing - specifies the cellspacing of the HTML table
• Width - specifies the width of the HTML table (can be in pixels, percentages, etc.)
• HorizontalAlign - specifies how the table should be aligned (Left, Right, Center, NotSet)

<asp:DataGrid runat="server" id="dgFAQs" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Bold="True" Font-Name="Verdana" Font-Size="10pt" />

[View a live demo!]

Pretty impressive, eh? With just a few lines of text we greatly improved the UI of our DataGrid. We went from a vanilla HTML table to a centered one with a gray background color and a nice-looking font.

Getting Fancy with Styles

• HeaderStyle - Specifies the style information for the header (the top row of the table that lists the column names; you must have the DataGrid's ShowHeader property set to true (the default).)
• FooterStyle - Specifies the style information for the footer (the bottom row of the table that lists the column names; you must have the DataGrid's ShowFooter property set to true (the default is false).)
• ItemStyle - Specifies the style information for each row in the table.
• AlternatingItemStyle - Specifies the style information for alternate rows in the table. You can set the ItemStyle and AlternatingItemStyle to different values for an easier-to-read DataGrid (see the below demo for an example).

Like other DataGrid formatting properties, the styles can be set either programmatically or through the DataGrid's Web control tags. As aforementioned, I prefer the Web control tag approach and will stick to that for this example. There are two ways to set the style properties through the Web control tag syntax. The first is similar to the way we've been specifying properties that were, in actually, objects, by using the dash (i.e., to set the BackColor for the HeaderStyle you could do: HeaderStyle.BackColor="Red")

Another approach is to use special style blocks within the definition of the Web control tag, like so:

<asp:DataGrid runat="server"> <HeaderStyle BackColor="Red" /> </asp:DataGrid>

Either way is fine. I find using the embedded tags helps in readability, especially when you plan on setting a lot of properties for a lot of styles. The following example shows how to pretty-up our earlier example:

<asp:DataGrid runat="server" id="dgFAQs" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" Font-Size="10pt"> <HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" /> <AlternatingItemStyle BackColor="White" /> </asp:datagrid>

[View a live demo!]

Now that we've examined how to integrate stylistic features and how to set global display properties for a DataGrid control, we've got one topic left for this part of the article series: how to customize the formatting and style for each specific column in the DataGrid. More on this technique in Part 2 of this article!