Buy the Book! 5-Star Rating at Amazon.com! Amazon.com ratings updated weekly... Advertisements

As discussed extensively in Chapter 4, Adding Buttons and Hyperlinks to the DataGrid Web Control, the DataGrid's HyperLinkColumn is ideal for creating a column of hyperlinks in the DataGrid. By default, the rendered hyperlink is a simple text hyperlink. However, it is quite possible to have the HyperLinkColumn display clickable images.

The "secret" to getting the HyperLinkColumn to display clickable images is in setting the HyperLinkColumn's Text or DataTextFormatString properties. If you wanted a static hyperlink text for all hyperlinks, you'd set the Text property to the static text to display. For example, to have the HyperLinkColumn display a hyperlink titled, "Click For More Info," you'd simply set the HyperLinkColumn's Text property to "Click For More Info." If you want to display a static image - that is, the same image for every row - simply specify the appropriate HTML in the Text property for the image.

For example, on the Recommended Articles section of this Web site, a list of recommended articles is displayed, with the title of the article a hyperlink to the article. Imagine, though, that instead of displaying a hyperlink, we wanted to have an image titled "GO" that, when clicked, would take the user to the specified article. To accomplish this we could set the HyperLinkColumn's Text property like so:

That's all there is to it! Check out this live demo. You can extend this technique to having each row display a different image based on some DataSource field by using the DataTextFormatString property.