Specifying Row-Level Display Properties

In the previous section, we noted a number of display properties that apply to the entire table rendered by the DataGrid or DataList. Most of these properties can also be applied at the row level, as we will see shortly.

To enable the developer to set row-level properties, the DataList and DataGrid provide a number of "ItemStyle" properties. These properties are called "ItemStyle" properties because they specify style information for the DataGridItem and DataListItem controls, which, as you'll recall from the previous chapter, are rendered as rows in the resulting table. The "ItemStyle" properties include the following:

• ItemStyle

• AlternatingItemStyle

• EditItemStyle

• SelectedItemStyle

• HeaderStyle

• FooterStyle

The last four "ItemStyle" properties—EditItemStyle, SelectedItemStyle, HeaderItemStyle, and FooterItemStyle—specify row-level styles for exactly one row. For example, the HeaderItemStyle specifies style information for the header row.

On the other hand, the ItemStyle and AlternatingItemStyle properties specify style settings for multiple rows. If the AlternatingItemStyle style is specified, it is applied to each alternating row in the table. If it is not specified, the ItemStyle is applied to all rows in the table.

Each of these "ItemStyle" properties is defined as a TableItemStyle instance. Table 3.2 shows the germane display properties of the TableItemStyle class.

Table 3.2 Common TableItemStyle Display Properties, Which Can Be Used to Specify Row-Level Display Properties

Comparing Table 3.2 to Table 3.1, you can see that Table 3.2 does not include properties like CellPadding and CellSpacing, which are clearly table-level display settings. Furthermore, Table 3.1 does not contain the obvious row-level display settings, such as VerticalAlign and Wrap. The overlapping display properties, though, are common to both Tables 3.1 and 3.2.

As with the table-level display properties, the row-level display properties can be set both declaratively and programmatically. In addition to being set declaratively, the "ItemStyle" properties can also be set using embedded tags inside the DataGrid or DataList tag, as shown in Listing 3.2 on lines 9 and 10. The remaining source code has been omitted from Listing 3.2; essentially it is identical to the source code in Listing 3.1, with lines 22–25 from Listing 3.1 omitted. Figure 3.2 shows a screenshot of Listing 3.2 when viewed through a browser.

Listing 3.2 A DataList Is Used to Display Mailing Labels for the Various Authors

 1: <asp:datalist id="dlAuthorMailLabels" runat="server" Font-Name="Verdana"
 2:  HorizontalAlign="Center"
 3:  CellSpacing="10"
 4:
 5:  ItemStyle-Font-Size="8"
 6:
 7:  AlternatingItemStyle-BackColor="#dddddd">
 8:
 9:  <HeaderStyle HorizontalAlign="Center" Font-Bold="True"
10:     BackColor="Blue" ForeColor="White" />
11:
12:  <HeaderTemplate>
13:  Mailing Labels
14:  </HeaderTemplate>
15:
16:  <ItemTemplate>
17:  <%# DataBinder.Eval(Container.DataItem, "au_fname") %>
18:  <%# DataBinder.Eval(Container.DataItem, "au_lname") %>
19:  <br />
20:  <%# DataBinder.Eval(Container.DataItem, "address") %>
21:  <br />
22:  <%# DataBinder.Eval(Container.DataItem, "city") %>,
23:  <%# DataBinder.Eval(Container.DataItem, "state") %>
24:  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
25:  <%# DataBinder.Eval(Container.DataItem, "zip") %>
26:  </ItemTemplate>
27: </asp:datalist>

Figure 3.2
The authors' contact information is presented as a list of mailing labels.

As mentioned earlier, one of the "ItemStyles" is the HeaderStyle, which specifies the display properties for the header. With the DataGrid, the header is automatically generated, containing the name of the columns. With the DataList, we have to supply our own header using the HeaderTemplate. In Listing 3.2, we simply give a title to our table in the HeaderTemplate (lines 12–14).

---

Note - The header is the first row displayed in a data Web control, and typically contains a title for each column of data.

---

On lines 9 and 10, the HeaderStyle properties are set. Note that with the "ItemStyle" properties, we can use an alternative form of declaratively defining the properties. Simply put, we use a tag within the DataList (or DataGrid) tag. The tag name is the name of the "ItemStyle" property that we want to work with. We can then set the properties of that "ItemStyle" property by specifying them as attributes in the tag. For example, on line 10, we set the BackColor and ForeColor of the HeaderStyle to Blue and White, respectively.

On line 5 we set the ItemStyle's Font property's Size object to 8 point. On line 7 we set the AlternatingItemStyle's BackColor property to #dddddd, which is a light gray. This has the effect of alternating the background color between white and light gray for each alternating row in the DataList.

The ItemTemplate in Listing 3.2 (lines 17–25) is fairly straightforward, and is intended to display a list that can be used for mailing labels. First, the author's first and last names are shown, then a break (<br />), then the author's address, then another break, and finally the author's city, state, and zip code. Note that the &nbsp; is HTML markup to display nonbreaking whitespace. The five instances of &nbsp; (line 24) set the zip code five spaces from the end of the state in the city, state, and zip code line.

The code in Listing 3.2 does not demonstrate how to set "ItemStyle" properties programmatically. However, it is likely that your intuition can tell you the syntax. For example, to set the HeaderStyle's HorizontalAlign property to center, we could use

dlAuthorMailLabels.HeaderStyle.HorizontalAlign = HorizontalAlign.Center

To set the ItemStyle's Font's Size to 8 point, we could use

dlAuthorMailLabels.ItemStyle.Font.Size = FontUnit.Point(8)

A bit more care must be taken when setting the property of a data Web control programmatically versus setting it declaratively. When setting the font size declaratively, we simply use

<asp:DataList Font-Size="8pt" ... />

Notice that we essentially set the DataList's Font.Size property to the string "8pt". When setting the property programmatically, however, we just assign the Font.Size property to a string. That is, if we tried to set the DataList's Font.Size property to "8pt" using

dlAuthorMailLabels.ItemStyle.Font.Size = "8pt"

we'd get a compile-time error because of the mismatched types. That is, the Size property of the DataList's Font property expects a value of type System.Web.UI. WebControls.FontUnit, not of type string. That is why, in our earlier example, we set the DataList's Font.Size property to the FontUnit instance returned by the FontUnit.Point method:

dlAuthorMailLabels.ItemStyle.Font.Size = FontUnit.Point(8)

You might be wondering how I knew that the DataList's Font property's Size property was expecting a value of type FontUnit and not string. If you are given an expression like

dlAuthorMailLabels.ItemStyle.Font.Size

and you need to determine the type of that expression, simply start with the leftmost object and work your way to the right end. That is, the leftmost object, dlAuthorMailLabels, is a DataList object. It has an ItemStyle property, which is the second leftmost object. This ItemStyle property is of type TableItemStyle, as we discussed eariler. The TableItemStyle class has a property Font, which is of type FontInfo. The FontInfo class has a property Size, which is of type FontUnit. Hence, the type of the entire expression

dlAuthorMailLabels.ItemStyle.Font.Size

is FontUnit, meaning we must assign a value of type FontUnit to this expression.

---

Note - Given this information, you might now be wondering why the Font.Size property can be assigned a string in the declarative form. That is, given what we just discussed, why doesn't

<asp:DataList Font-Size="8pt" ... />

generate a type mismatch compile-time error? The reason is because, behind the scenes, the string "8pt." is being automatically converted into an appropriate FontUnit instance.

---