Chapter 10: Displaying Content Using Data Lists

Figure 10.7. Editing the username

Change the name or username, and click Update Item to see the listed data change. In Figure 10.7, you can see that I’ve changed Zak’s username to zakNew.

DataList and Visual Web Developer

Just like some of the more complex web server controls, DataLists offer a number of design-time features that are tightly integrated within Visual Web Developer. One of these slick features is the smart tag, which appears as a little arrow button in the upper-right part of the control when the cursor is hovered over the control in Design View.

You’ll be working with these neat features in coming chapters, but we can’t finish a chapter on DataLists without making ourselves aware of them. If you open EmployeeDirectory.aspx in Design View, and click the smart tag, you’ll see the menu depicted in Figure 10.8.

You can use this menu to apply predefined styles to your grid, choose a data source control (you’ll learn more about these in the following chapters), or edit the grid’s templates.

422

DataList and Visual Web Developer

Figure 10.8. The smart tag options of DataList

If you click Edit Templates, you can build the DataList’s templates visually, as Figure 10.9 indicates.

Figure 10.9. Building the DataList’s templates visually

We’ll generally write most of the code by hand, but it’s good to know that you also have this visual option.

423

Chapter 10: Displaying Content Using Data Lists

Choosing the Property Builder from the smart tag’s menu displays a window that lets us set various properties of a DataList. We can access the same settings through the Properties window, but with the DataList we have another way to set these properties.

The Choose Data Source item in the smart tag’s menu lets us choose a data source control for our list. You’ll learn a lot more about this in Chapter 12.

Styling the DataList

The Auto Format item in the smart tag menu is probably the most interesting. I left this discussion until the end of the chapter to give you the chance to play with it a little beforehand. When you select Auto Format, a dialog with a number of predefined setups will appear; you can customize these options manually to suit your tastes, as Figure 10.10 illustrates.

Figure 10.10. Choosing an Auto Format option

If you choose the Simple style, then remove the SeparatorTemplate from your DataList, your Employee Directory page will look like the one shown in Figure 10.11.

You may ask what happened behind the scenes. If you look at the DataList definition in EmployeeDirectory.aspx, you’ll see it contains a few new lines that Visual Web Developer generated for us after we chose the style:

</EditItemTemplate>

<FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

424

Styling the DataList

Figure 10.11. The styled Employee Directory list

<SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />

<AlternatingItemStyle BackColor="White" /> <ItemStyle BackColor="#E3EAEB" />

<HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />

</asp:DataList>

The significance of these new elements is as follows:

HeaderStyle

customizes the appearance of the DataList’s heading

ItemStyle

customizes the appearance of each item displayed within the DataList

AlternatingItemStyle

customizes the appearance of every other item displayed within the DataList

425