Using the Repeater and DataList Controls

Both the Repeater and DataList controls—the subjects of this chapter—enable you to display a set of data items at a time. For example, you can use these controls to display all the rows contained in a database table. The Repeater control is entirely template driven. You can format the rendered output of the control in any way that you please. For example, you can use the Repeater control to display records in a bulleted list, a set of HTML tables, or even in a comma-delimited list.

The DataList control is also template driven. However, unlike the Repeater control, the default behavior of the DataList control is to render its contents into an HTML table. The DataList control renders each record from its data source into a separate HTML table cell.

In this chapter, you learn how to use both of these controls to display database data. You also learn how to use each of the different types of templates that each of the controls supports. Finally, you can see how to handle the different types of events that the controls expose.

Using the Repeater Control

The Repeater control provides you with the maximum amount of flexibility in rendering a set of database records. You can format the output of the Repeater control in any way that you please. In this section, you learn how to display data with the Repeater control and handle Repeater control events.

Displaying Data with the Repeater Control

To display data with the Repeater control, you must create an ItemTemplate. For example, the page in Listing displays the contents of the Movies database table.

The Repeater control in Listing displays each record in a separate HTML <div> tag. A databinding expression is used to display the value of each column. In Listing, declarative databinding is used to bind the Repeater to the SqlDataSource. You also can databind a Repeater control programmatically.

For example, the page in Listing contains a Repeater control that renders a JavaScript array. The Repeater control is programmatically databound to the list of files in the Photos directory.

The page in Listing randomly displays a different photo every five seconds. A random image is selected from the JavaScript array and displayed by the JavaScript showImage() function. An Internet Explorer transition filter is used to create a fade-in effect.

The transition filter is an Internet Explorer–only extension to Cascading Style Sheets. The page still works with Opera 8 and Firefox 1, but you don’t get the fade-in effect.

Using Templates with the Repeater Control

The Repeater control supports five different types of templates:

• ItemTemplate—Formats each item from the data source.
• AlternatingItemTemplate—Formats every other item from the data source.
• SeparatorTemplate—Formats between each item from the data source.
• HeaderTemplate—Formats before all items from the data source.
• FooterTemplate—Formats after all items from the data source.

You are required to use only an ItemTemplate; the other types of templates can be used at your own discretion. The order in which you declare the templates in the Repeater control does not matter.

Handling Repeater Control Events

The Repeater control supports the following events:

• DataBinding—Raised when the Repeater control is bound to its data source.
• ItemCommand—Raised when a control contained in the Repeater control raises an event.
• ItemCreated—Raised when each Repeater item is created.
• ItemDataBound—Raised when each Repeater item is bound.

Using the DataList Control

The DataList control, like the Repeater control, is template driven. Unlike the Repeater control, by default, the DataList renders an HTML table. Because the DataList uses a particular layout to render its content, you are provided with more formatting options when using the DataList control.

In this section, you learn how to use the DataList control to display data. You also learn how to render database records in both single-column and multi-column HTML tables. We also explore how you can edit data with the DataList control.

Displaying Data with the DataList Control

To display data with the DataList control, you must supply the control with an ItemTemplate. The contents of the ItemTemplate are rendered for each data item from the data source.

The RepeatLayout property accepts one of the following two values:

• Table—Data Items are rendered in HTML table cells.
• Flow—Data Items are rendered in HTML <span> tags.

Displaying Data in Multiple Columns

You can render the contents of a DataList control into a multi-column table in which each data item occupies a separate table cell. Two properties modify the layout of the HTML table rendered by the DataList control:

• RepeatColumns—The number of columns to display.
• RepeatDirection—The direction to render the cells. Possible values are Horizontal and Vertical.

If you set the RepeatDirection property to the value Horizontal and do not assign a value to the RepeatColumns property, then the DataList renders its data items horizontally without end.

You can display data items in multiple columns when the DataList is in Flow layout mode. In that case, <br> tags are used to create the row breaks.

Using Templates with the DataList Control

The DataList control supports all the same templates as the Repeater control:

• ItemTemplate—Formats each item from the data source.
• AlternatingItemTemplate—Formats every other item from the data source.
• SeparatorTemplate—Formats between each item from the data source.
• HeaderTemplate—Formats before all items from the data source.
• FooterTemplate—Formats after all items from the data source

In addition, the DataList supports the following templates:

• EditItemTemplate—Displayed when a row is selected for editing.
• SelectedItemTemplate—Displayed when a row is selected

Selecting Data with the DataList Control

You can use a DataList control as a menu by taking advantage of the control’s SelectedValue property. For example, the page in Listing enables you to pick a movie category and display a list of matching movies.

Because the LinkButton control’s CommandName property has the value Select, clicking the button changes the value of the DataList control’s SelectedValue property. The DataList control’s SelectedValue property is used by the second SqlDataSource control to return movies that match the selected category.

Unlike the GridView, DetailsView, ListView, and FormView controls, you cannot assign the names of multiple primary key columns to the DataKeyField property.

Editing Data with the DataList Control

You can use the DataList control to edit database records. However, editing with the DataList control requires more coding than editing with other DataBound controls such as the GridView, FormView, or DetailsView controls.

The EditItemTemplate includes form fields for editing a movie record and an Update and Cancel LinkButton. These LinkButtons raise the UpdateCommand and CancelCommand events, and execute the corresponding event handlers.

Notice that the <%@ Page %> directive includes a MaintainScrollPositionOnPostback attribute. This attribute causes a page to scroll to the same position whenever you post the page back to the server. For example, when you click the Edit link next to a row in the DataList, the page scrolls to the Edit link that you clicked. This attribute works with Internet Explorer 6+, FireFox 1+, and Opera 8+.

Formatting the DataList Control

The DataList control includes a rich set of properties that you can use to format the HTML rendered by the control. If you want to associate Cascading Style Sheet rules with different elements of the DataList, then you can take advantage of any of the following properties:

• CssClass—Enables you to associate a CSS class with the DataList.
• AlternatingItemStyle—Enables you to format every other row of the DataList.
• EditItemStyle—Enables you to format the DataList row selected for editing.
• FooterStyle—Enables you to format the footer row of the DataList.
• HeaderStyle—Enables you to format the header row of the DataList.
• ItemStyle—Enables you to format each row displayed by the DataList.
• SelectedItemStyle—Enables you to format the selected row in the DataList.
• SeparatorStyle—Enables you to format the row separator displayed by the DataList.

When formatting the DataList, you also need to work with the following properties:

• GridLines—Enables you to add rules around the cells in the DataList. Possible values are None, Horizontal, Vertical, and Both.
• ShowFooter—Enables you to show or hide the footer row.
• ShowHeader—Enables you to show or hide the header row.
• UseAccessibleHeader—Enables you to render HTML <th> tags instead of <td> tags for the cells in the header row.

To make a page that contains a DataList more accessible to persons with disabilities, you should always include a HeaderTemplate and enable the UserAccessibleHeader property.