Using the DataGrid SB
This tutorial creates the ASP.NET/VB version of the Edit Listing Details page from Chapter 16 of The Joy of Dreamweaver MX. It includes coverage of DataGrids, DataSets, web controls, and setting up an ASP.NET site in Dreamweaver MX.
The Joy of Dreamweaver MX: Recipes for Data-Driven Web Sites is a web developer's cookbook filled with dozens of "secret" recipes that DMXers can really sink their teeth into.
Download the code for the tutorial from the book's companion web site, or read a sample chapter - "Uploads Made Simple" - here on DMXzone.
You're not obligated to use the default column control tags in your DataGrid
(<asp:BoundColumn>, <asp:HyperLinkColumn>,
<asp:ButtonColumn>, etc). Instead, you can
create templates using the <asp:ItemTemplate>
tag (Dreamweaver refers to these as "Free Form" columns). For example,
if you want alternately colored rows in your results, you can use the <asp:AlternateItemTemplate>
tag. If you want custom headers and footers, you can use the <asp:HeaderTemplate>
and <asp:FooterTemplate> tags. You can even
add code to enable paging and record sorting.
Within the <asp:ItemTemplate> tags you can
place data binding expressions (e.g., <%# Expression
%>), web controls (e.g., <asp:dropdownlist>),
and any other HTML you would like. This makes <asp:DataGrid>
very versatile.
The Photo Column
To illustrate this, let's create a template. Double-click dgEditDetails
in the Server Behaviors panel to open the DataGrid SB. Click the plus button
and choose Free Form. This opens the Free Form Column dialog
box. Type Photo in the Title text box and enter the following
HTML in the Contents area:
<img width="50" height="50" src="../images/listings/details/">
The image filename is stored in the ListingRoomPic
column, so click Add Data Field. Select ListingRoomPic
from the Data Field drop-down menu and click OK. Dreamweaver MX inserts the
following code after the <img> tag:
<%# dsListingRooms.FieldValue("ListingRoomPic", Container)
%>
Cut and paste the preceding code into the image path, right after details/.
The completed code should look like this:
<img width="50" height="50" src="../images/listings/details/
<%# dsListingRooms.FieldValue("ListingRoomPic", Container) %>">
Click OK to apply the Free Form Column.
Let's test the page. Select View | Live Data Settings and click the plus (+)
button next to URL Request. Enter ListingID in the Name column,
and 3 in the Value column and click OK. Save your work and
press F12 to preview the page in a browser:
How do you like that — it works! You can also preview the page inside
Dreamweaver by clicking the Live Data View button on the Document toolbar. If
you switch to Code view (CTRL-`), you'll notice that
Dreamweaver MX uses the <asp:TemplateColumn>
and <ItemTemplate> tags to render the Photo
column:
<asp:TemplateColumn HeaderText="Photo" Visible="True">
<ItemTemplate>
<img width="50" height="50" src="../images/listings/details/
<%# dsListingRooms.FieldValue("ListingRoomPic", Container)
%>">
</ItemTemplate>
</asp:TemplateColumn>
Our next Free Form columns will get even fancier, as we specify an <asp:label>
tag in the ItemTemplate control, and an <asp:dropdownlist>
tag in the EditItemTemplate control.
Download
Sample Code
Author of "The Joy of Dreamweaver MX: Recipes for Data-Driven Web Sites," Paul Newman is President of BRAVE NEW WURLD, a New York web design firm. He has a BA in English and Creative Writing from Binghamton University and an MFA in Film Production from the UCLA Department of Film, Television, and Digital Media.
Paul's computer experience dates back to 1985, when he bought one of the first Apple Macintosh computers in his senior year of college. He has been building web sites since 1997, and his clients include RaikaUSA.com, VoiceoverAmerica.com, Officetek.com, and BarbaraTyson.com.
See All Postings From P.R. Newman >>