# Thursday, November 03, 2005
Thursday, November 03, 2005 6:52:23 PM (GMT Standard Time, UTC+00:00) ( Asp.Net )

i looked on the newsgroups to see if anyone had posted anything about this, and i found a few dead-end posts which seemed to conclude that it couldn't be done. 
i used a very simple approach that works well, and am posting it here for anyone looking to see how to do it.   the requirements are to present a radio-button-list with images instead of just text.

string imageBankFolder = "/ImageBankFolder/Thumbnails/";
DataSet ds = new DB.ImageBank().Select(); // get your dataset from wherever
foreach(DataRow dr in ds.Tables[0].Rows)
   this.RadioButtonList1.Items.Add(new ListItem(String.Format("<img src='{0}'>", imageBankFolder + dr["ImageFile"].ToString()), dr["ImageID"].ToString()));

this displays the images only.  note: firefox works fine with this, you can click on the image to select it, but IE6 requires you to actually click on the round radio button icon.  to work around this, i included some text above the image, which sits beside the button, and it is more intuitive for the user to click the text or the radio icon then.  to include some text above the image, try the following:

this.RadioButtonList1.Items.Add(new ListItem(String.Format("{1}<BR><img src='{0}'>", imageBankFolder + dr["ImageFile"].ToString(), dr["Text"].ToString()), dr["ImageID"].ToString()));

hope this helps someone out there.

Comments [10] | | # 
Friday, December 16, 2005 12:43:25 PM (GMT Standard Time, UTC+00:00)
This is really a great help.

Regards
Sarika
sarika
Monday, June 26, 2006 1:58:52 AM (GMT Daylight Time, UTC+01:00)
I found your post via google. You saved my life. Thank you very much!
Andres
Wednesday, August 09, 2006 3:02:00 PM (GMT Daylight Time, UTC+01:00)
Thanks for posting this Tim, it really does help everyone out there, even if they do not take the time to respond.

Regards!
Jason Leverett
Saturday, June 16, 2007 10:19:43 PM (GMT Daylight Time, UTC+01:00)
Thanks for the solution!
Your solution is the only I have found!
Artyom Slastin
Tuesday, July 10, 2007 7:24:02 AM (GMT Daylight Time, UTC+01:00)
Thanks for the post!!

Also for those who need it to be working in IE, I have improved the code. Just change the "<img scr='{0}'>" part to:

"<img src='{0}' onclick='javascript:return this.parentNode.previousSibling.checked=true;'>"


Cheers,
Ivan Wu
Friday, April 04, 2008 8:47:50 AM (GMT Daylight Time, UTC+01:00)
Thank u soooooooooooooooo much
Aditi
Saturday, September 20, 2008 3:31:47 AM (GMT Daylight Time, UTC+01:00)
Man, thank you so much!! That´s exactly what I was lookig for!


The trick here is that the RadioButtonList is converted in a html input of type radio and a html label. Inside the label part you can put any html. So if you need to insert more then a img tag, try the same approach, it will work.

Cheers

PS: And thanks google! Without you I couldn´t find this tip.
Alessandro
Thursday, October 16, 2008 10:35:49 AM (GMT Daylight Time, UTC+01:00)
Thank you very much, I was looking for this kind of information for one week! And I was so sure it was not possible to do it directly inside the RadioButtonList that I decided to completely change the way it is working but that was really more complicated!!
Now I have the solution :-)
So thank you so much to have shared your knowledge
Cheers
Nathalie
Tuesday, August 11, 2009 3:09:51 PM (GMT Daylight Time, UTC+01:00)
Genius.
Paulm
Monday, August 31, 2009 8:34:01 AM (GMT Daylight Time, UTC+01:00)
Thanks, you save a lot of work!
Duc Dung
Duc Dung
Name
E-mail
Home page

Comment (HTML not allowed)  

Enter the code shown (prevents robots):

Live Comment Preview