Defining Additional Templates | Microsoft ASP.NET Web Matrix Starter Kit (Bpg-Other)

As I mentioned earlier in this chapter, the DataList control allows you to create templates not just for individual items, but for other areas of your listing as well. In this section, I ll show you how to create separator and footer templates. You can define one header, footer, and separator template for each DataList control.

Header, footer, and separator templates are much easier to define than item templates, because you don t add controls to those templates. In fact, it doesn t make sense to add data-bound controls to the header or footer, because the DataList control renders those templates only once, at the beginning and end of the listing, respectively.

Define the separator and footer templates

In the template editor, under Select A Template To Edit, choose Separator Template from the drop-down list. The right-hand drop-down list will also say Separator Template.
In the Toolbox, switch to the HTML Elements tab and drag a Horizontal Rule element into the Template Design box. (You might have to scroll down in the Toolbox to find the Horizontal Rule element.) As you can deduce, the Horizontal Rule element is an HTML <hr> element.
With the Horizontal Rule element selected in the template editor, use the Properties window to set its align property to Left and set its color to whatever you like.
Under Select A Template To Edit, select Header And Footer Templates from the drop-down list, and in the right-hand drop-down list, choose Footer Template.
In the Template Design box, type (End of listing) and make the text bold.
Click OK to close the template-editing window.

The DataList control now displays the layout that you ve defined using templates. In Design view, when you see the DataList control, you see the word Databound in place of the controls, which tells you that the DataList control contains controls with a data-binding expression.

Tip

You might find the current layout a little narrow. If so, click the DataList control to select it, and then resize it to make it wider.