When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
Related Web Technologies
User Tips!
Coding Tips

Sample Chapters
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Stump the SQL Guru!
XML Info
Author an Article
Print this page.
Published: Thursday, February 27, 2003

ASP.NET Data Web Controls Kick Start
Chapter 3: Customizing the HTML Output
By Scott Mitchell

In This Chapter

  • Specifying Display Properties in the DataGrid and DataList

  • Customizing Data-Binding Output in Templates

  • On the Web

We have used the data Web controls a number of times in code examples in the past two chapters. However, the appearance of the output has left a lot to be desired. Fortunately, making the DataGrid and DataList output more visually pleasing is quite simple, even for artistically challenged developers like myself!

As we will see in this chapter, both the DataGrid and DataList expose a number of properties that make specifying these details a breeze. Additionally, we'll look at how editors like Visual Studio .NET and the Web Matrix Project make specifying the appearance of the DataGrid and DataList as easy clicking a few buttons. (Note that the Repeater control does not contain any sort of stylistic properties; the developer is responsible for specifying any aesthetic properties directly in the HTML markup of the Repeater's templates.)

In this chapter we will also look at how to use built-in methods and custom functions to alter the output of data binding expressions in templates. For example, in Chapter 2's Listing 2.5, the String.Format() method is used within the data-binding expression of an ItemTemplate to have the number returned by Container.DataItem formatted with commas every three digits (line 17). (That is, 17711 [the 22nd Fibonacci number] is displayed as 17,711.) We'll examine how to use this approach to further customize the HTML emitted by data-bound values in a template.

By the end of this chapter, you will be able to generate professional-looking DataGrids and DataLists with just the setting of a few properties, or if you're using Visual Studio .NET or the Web Matrix Project, with simply the click of the mouse.

Specifying Display Properties in the DataGrid and DataList

Although the code examples we've studied thus far have been very useful in their structured display of data, they have been far from eye-pleasing. When viewing the screenshots of the code examples, did you ever think, "I wonder how I can change the font?" or "Wouldn't it look nicer if the cells in the DataGrid header were center-aligned?" If you did, you'll be pleased to learn that specifying such stylistic properties for the DataGrid and DataList is quite simple, as we will see in this section.

Recall that the DataGrid and DataList controls render into HTML table tags. When you think of a table, there are three levels to which stylistic formatting can be applied.

First, formatting can be applied to the entire table. This might include setting the font for the entire table to Verdana, or specifying the CellPadding or CellSpacing for the table.

Note - CellPadding and CellSpacing are two stylistic properties of an HTML table. The CellPadding specifies the number of pixels between the cell's border and the cell's textual content. The CellSpacing specifies, in pixels, the spacing between neighboring table cells.

Second, formatting can be applied at the table row level. This row-level formatting can be specified for all rows in the table; for example, you might want all the rows to have a certain background color. Of course, setting this property for all the rows is synonymous with setting the property for the entire table.

You can also specify row-level formatting for just a subset of the rows. For example, you might opt for the rows' background to alternate between two colors. (That is, each even row might have a white background, and each odd row might have a light gray background.) Additionally, you can use row-level formatting to specify formatting for a single row. With the DataGrid and DataList, you can select a row and edit its data. You might want to use an alternative font for the row that is being edited. (We'll look at how to edit data in Chapter 9, "Editing the DataGrid Web Control.") In a similar vein, you might want to have a different style for the header and footer rows of the table.

The third level of stylistic formatting can be applied to the column level. Recall that the DataGrid has a Columns tag in which you can explicitly specify what columns should appear in the DataGrid control. Not surprisingly, you can apply stylistic settings to these columns. For example, you might want to have certain columns center- or right-aligned.

In this section, we will look at each of these levels of formatting separately and how to apply them programmatically. After this, we will look at specifying this formatting information using Visual Studio .NET and the Web Matrix Project. As we will see, specifying this property information with these tools is quite simple, requiring just a few clicks of the mouse.

Specifying Table-Level Display Properties

The DataGrid and DataList contain a number of table-level properties. Table 3.1 lists some of the more useful ones, along with a short description of each.

Table 3.1 Common Table-Level Properties for DataGrid and DataList




The background color of the table.


The color of the table border.


The border style. Must be set to a member of the BorderStyle enumeration.


The width of the border.


The cellpadding attribute of the table tag.


The cellspacing attribute of the table tag.


A cascading stylesheet class for the table that specifies style information.


Font information for the table. Specifies the font's name, size, and style options (bolded, italicized, underlined, and so on).


The foreground color of the table.


The height of the table, in either pixels or percentages.


The horizontal alignment of the table (Left, Right, or Center).


The width of the table, in either pixels or percentages.

These stylistic properties can be assigned programmatically, in the ASP.NET Web page's server-side script block or code-behind page, or declaratively, in the control's definition in the HTML section of the ASP.NET Web page.

Listing 3.1 illustrates the setting of a DataGrid's stylistic properties both programmatically and declaratively. Note that the majority of the contents of Listing 3.1 are identical to the code in Listing 2.1. The only differences are the DataGrid declaration on lines 30 and 31 and lines 23–25, where two display properties of the DataGrid are set programmatically.

Listing 3.1 A DataGrid's Display Properties Are Set Declaratively and Programmatically

 1: <%@ import Namespace="System.Data" %>
 2: <%@ import Namespace="System.Data.SqlClient" %>
 3: <script runat="server" language="VB">
 5:  Sub Page_Load(sender as Object, e as EventArgs)
 6:  '1. Create a connection
 7:  Const strConnString as String = "server=localhost;uid=sa;pwd=; database=pubs"
 8:  Dim objConn as New SqlConnection(strConnString)
10:  '2. Create a command object for the query
11:  Const strSQL as String = "SELECT * FROM authors"
12:  Dim objCmd as New SqlCommand(strSQL, objConn)
14:  objConn.Open() 'Open the connection
16:  'Finally, specify the DataSource and call DataBind()
17:  dgAuthors.DataSource = objCmd.ExecuteReader(CommandBehavior. CloseConnection)
18:  dgAuthors.DataBind()
20:  objConn.Close() 'Close the connection
23:  ' Set some DataGrid display properties programmatically
24:  dgAuthors.HorizontalAlign = HorizontalAlign.Center
25:  dgAuthors.Font.Bold = True
26:  End Sub
28: </script>
30: <asp:datagrid id="dgAuthors" runat="server" Font-Name="Verdana"
31:  Width="50%" />

Note that the DataGrid in Listing 3.1 has its display properties specified both programmatically (lines 24 and 25) and declaratively (lines 30 and 31). In the declarative section, we specify that the Verdana font should be used, and that the table should have a width of 50%. And in the Page_Load event handler, we specify that the table should be center-aligned and have a bold font.

One thing to note is the syntax used when specifying the font name. The Font property of the DataGrid (and DataList) is an instance of the System.Web.UI. WebControls.FontInfo class, which contains a number of properties, such as Name, Bold, Italic, Size, and so on. Therefore, we don't want to assign "Verdana" to the Font property, but instead to the Font.Name property. However, this dot notation, which we use when specifying a property programmatically (see line 25), does not work when setting a property declaratively. Rather, we have to replace all dots with dashes. Hence, instead of saying Font.Name = "Verdana" we do Font-Name="Verdana" (line 30).

On lines 24 and 25 we set two properties declaratively. The first is the HorizontalAlign property, which specifies that the table should be center-aligned. Note that the HorizontalAlign property needs to be assigned a value from the HorizontalAlign enumeration, so we assign it to HorizontalAlign.Center (line 24). If we were setting this property declaratively, however, we could omit the enumeration name, and just use HorizontalAlign="Center". On line 25 we specify that the contents of the table should be displayed in bold.

Note - Had we used a DataList instead of a DataGrid in Listing 3.1, neither the programmatic nor declarative property settings would need to be changed in any way.

Figure 3.1 depicts a screenshot of Listing 3.1 when viewed through a browser.

Figure 3.1 
A centered table displayed in bold with a width of 50% is rendered.

  • Read Part 2

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