An Extensive Examination of the DataGrid Web Control: Part 2By Scott Mitchell
|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.
In Part 1 we examined the elementary basics of the DataGrid, an ASP.NET Web control designed to display data in an HTML table tag. Part 1 illustrates how simple it was to bind database contents to a DataGrid: all we needed to do was populate a DataReader object with a SQL query, set the DataReader to the DataGrid's
DataSourceproperty, and then call the DataGrid's
DataBind()method. All that was left was to place the DataGrid Web control in the HTML content, which could be done with:
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
We have two options on how to specify formatting options for a DataGrid. The first option is to set the setting programmatically in the server-side script block. For example, to set the background color of the DataGrid to red you could use the following server-side code:
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:
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
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)
Fontproperty of the DataGrid is, in actuality, an object reference to the
FontInfoclass, which contains properties like
Italic, etc. In order to set a property of one of the classes represented by the
Fontwe have to use a hyphen (
-). This is synonymous to the "dot" in languages like VB.NET and C# when referencing an object's property.
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
The DataGrid Web control contains a number of "styles" that you will find quite useful in customizing the look and feel of the DataGrid. These styles can support a number of stylistic properties such as:
Width, to name the most useful ones. (See the docs for more information.) There are four available styles in DataGrids:
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
ShowHeaderproperty 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
ShowFooterproperty 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
AlternatingItemStyleto 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:
Another approach is to use special style blocks within the definition of the Web control tag, like so:
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:
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!