To read the article online, visit

An Extensive Examination of the DataGrid Web Control: Part 2

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

    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 DataSource property, 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:

    <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

    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:

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

    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)
    An example of using these display preference properties to create a nicer looking DataGrid can be seen below. Note that the Font property of the DataGrid is, in actuality, an object reference to the FontInfo class, which contains properties like Size, Name, Bold, Italic, etc. In order to set a property of one of the classes represented by the Font we have to use a hyphen (-). This is synonymous to the "dot" in languages like VB.NET and C# when referencing an object's property.

    <asp:DataGrid runat="server" id="dgFAQs" 
                    BackColor="#eeeeee" Width="85%"
                    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

    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: BackColor, ForeColor, Font, HorizontalAlign, and 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 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" />

    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%"
      <HeaderStyle BackColor="Black" ForeColor="White" 
                   Font-Bold="True" HorizontalAlign="Center" />
      <AlternatingItemStyle BackColor="White" />
    [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!

  • Read Part 2!

  • Article Information
    Article Title: ASP.NET.An Extensive Examination of the DataGrid Web Control: Part 2
    Article Author: Scott Mitchell
    Published Date: April 17, 2002
    Article URL:

    Copyright 2021 QuinStreet Inc. All Rights Reserved.
    Legal Notices, Licensing, Permissions, Privacy Policy.
    Advertise | Newsletters | E-mail Offers