WebGuru’s Blog about Digital Life

Challenge: How to display an image in a column of ASP.NET Gridview based on the data from a database table. For example, I have a GridView to display some speakers’ profile with name, address etc. Within it, I need to display a clip icon in the column of “Speech” to indicate that this speaker has a speech document attached.

Here is the example:

Speakers Information
LAST NAME	FIRST_NAME	EMAIL	SPEECH
Gates	Bill	bill.gates@microsoft.com	bill_gates.doc	Edit
Schmidt	Eric	eric.schmidt@google.com		Edit

From the above table, you can see that we have two speakers one of which has an attached speech document and the other does not. Assume we have a database in the back-end with a column containing the document filename called “speech”. And if we use a boundfield like <asp:BoundField DataField=”speech” HeaderText=”SPEECH” > in the gridview control, the gridview will grab the filename from the database and display it. If a speaker does not have any speech in the database, then the gridview shows blank in the table above.

Of course, what I needed was not to just show the filename. I wanted to show only a clip icon if a speech exists with a link pointing to the file location, and blank if none. Yes, in ASP.10/1.1 we can use RowDataBound event to achieve such requirement. In that RowDataBound function, you need to iterate all data row, and pull over data from the speech cell then make a decision whether this cell is blank or not. If it is not blank, then show a image with a link, if yes, then do nothing.

But in ASP.net 2.0, things become easier with the nice new gridview column type called HyperLinkField. This field can allow you to define a hyperlink based on a data field, and displaying text based on another data field. In my case, I will use the filename plus the directory information as the hyperlink URL. Then I will some HTML tags to display the clip icon.

And the nicest thing is that since my displaying image tag is based on the speech data field too, it would not show automatically if the data field is blank.

 

<asp:HyperLinkField DataNavigateUrlFields=”SPEECH” DataNavigateUrlFormatString=”~/docs/{0}” HeaderText=”SPEECH” DataTextField=”SPEECH” DataTextFormatString=”<img src=’images/attach.gif’ alt=’{0}’ border=’0′ />” />

A little explanation here:
DataNavigateUrlFields - The database field to generate the hyperlink
DataTextField - The database field to display text in the gridview
DataNavigateUrlFormatString - I can use this attribute to generate more information for the hyperlink. Like I add the directory information before the file name. {0} is just the placeholder for the DataNavigateURLFields content.
DataTextFormatString - The same as URL format string, I use any HTML tag to display other elements instead of only the plain text. Here I am using <img src=’images/attach.gif’ alt=’{0}’ border=’0′ /> to show a nice icon image to replace the plain text of speech file name.

OK, with that setting up above, I can successfully get the following nice table.

Speakers Information
LAST NAME	FIRST_NAME	EMAIL	SPEECH
Gates	Bill	bill.gates@microsoft.com		Edit
Schmidt	Eric	eric.schmidt@google.com		Edit

Do not ask me why we need to put an icon in the table This example is only to demo how easily you can HyperLink field in your gridview. Enjoy programming!