When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips
Search

Sections:
Book Reviews
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
Web Hosts
XML
Information:
Advertise
Feedback
Author an Article
Jobs

ASP ASP.NET ASP FAQs Message Board Feedback ASP Jobs
 
Print this Page!
Published: Wednesday, April 17, 2002

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
  • - continued -

    ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start

    ASP.NET Data Web Controls Kick Start is author Scott Mitchell's most recent book, which thoroughly examines three of the most commonly used ASP.NET Web controls: the DataGrid, DataList, and Repeater. These three Web controls can be difficult to master due to their numerous features and capabilities. With this book, you'll quickly become an expert, learning the gritty details and true capabilities of each. This 400+ page book explores the topics in this article series in much greater depth, along with examining various topics and techniques not covered here.

    Scott Mitchell is the editor and founder of 4GuysFromRolla.com, author of the An Extensive Examination of the DataGrid Web Control article series, and author of numerous other ASP and ASP.NET books.

    [Buy this Book]
    [Visit the Book's Companion Web Site]

    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
    </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)
    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%"
                    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


    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" />
    </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!

  • Read Part 2!



  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article