2006-01-18
Article Rating:
/ 22
| Table of Contents: |
| Rate This Article: | Add This Article To: |
|
( Page 5 of 6 )
Displaying Images in Your Grid
Notice the lower-left of the dialog box; this lists the columns that currently exist in the grid. I'm going to keep all of these except for one, the imagefile one. That's simply a bound field and will show up as text in the grid.
But we want a picture instead. So go ahead and click on the imagefile name in the Selected fields list, and then click the button with the red X to delete the column.
Now you want to add a new image field that will display the image. Go back to the Available Fields box in the upper left, scroll down, and click ImageField; then click Add. This adds a new ImageField to the grid. Back in the Selected Fields box, make sure the ImageField you added is selected (if not, single-click it).
With the ImageField field selected, its properties will appear in the properties list. There's actually enough properties to provide enough discussion for a chapter of a book, so I can't cover them all here — but, again, I encourage you to play with them. For now, scroll down to the DataImageUrlField property. Click its drop down, and choose imagefile, which is the name of the column in the database table.
The ImageField class is smart. It takes the text in the table's column (in this case the imagefile column) and constructs an IMG tag. For instance, one of the rows contains the text "j0412272.gif". The ImageField class will generate this text for the resulting HTML:
<img src="j0412272.gif" style="border-width:0px;" />
Thus, in that spot on the resulting Web page, you'll see the image specified in the text field, as you can see back in Figure 1. Personally, I think that's pretty cool! If you like, you can go ahead and open up the .aspx file in a web browser to see the images in action.
To continue, go ahead and click OK to get out of the Fields dialog. Then switch to code view. I'm going to have you add some CSS styles so that the grid will have a nice formatting.
Add the following style information to the existing .aspx file; the part you add is shown in bold:
<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="GridViewDemo.aspx.vb" Inherits="GridViewDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.gridhead1 {font-size: 12px;font-family:
Tahoma,Arial,sans-serif;text-align:left}
.gridbody1 {font-size: 12px;font-family:Tahoma,Arial,sans-serif;
text-align:left;background-color:#E0E0FF}
.gridbody2 {font-size: 12px;font-family:Tahoma,Arial,sans-serif;
text-align:left;background-color:#FFE8FF}
.gridcell {padding:3px;}
</style>
</head>
 |
|
