.Net ramblings
# Thursday, 03 November 2005
HowTo: present a radiobuttonlist with images

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.

Thursday, 03 November 2005 18:52:23 (GMT Standard Time, UTC+00:00)  #    Comments [14]  Asp.Net

Friday, 16 December 2005 12:43:25 (GMT Standard Time, UTC+00:00)
This is really a great help.

Monday, 26 June 2006 01:58:52 (GMT Daylight Time, UTC+01:00)
I found your post via google. You saved my life. Thank you very much!
Wednesday, 09 August 2006 15:02:00 (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.

Jason Leverett
Saturday, 16 June 2007 22:19:43 (GMT Daylight Time, UTC+01:00)
Thanks for the solution!
Your solution is the only I have found!
Artyom Slastin
Tuesday, 10 July 2007 07:24:02 (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;'>"

Ivan Wu
Friday, 04 April 2008 08:47:50 (GMT Daylight Time, UTC+01:00)
Thank u soooooooooooooooo much
Saturday, 20 September 2008 03:31:47 (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.


PS: And thanks google! Without you I couldn´t find this tip.
Thursday, 16 October 2008 10:35:49 (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
Tuesday, 11 August 2009 15:09:51 (GMT Daylight Time, UTC+01:00)
Monday, 31 August 2009 08:34:01 (GMT Daylight Time, UTC+01:00)
Thanks, you save a lot of work!
Duc Dung
Duc Dung
Saturday, 21 August 2010 05:17:58 (GMT Daylight Time, UTC+01:00)
u're a legend!
Thursday, 18 November 2010 09:18:11 (GMT Standard Time, UTC+00:00)
grazie... perfetto.
Tuesday, 03 April 2012 17:43:36 (GMT Daylight Time, UTC+01:00)
Gracias lo intente con un List<string> y si funciono.

protected void llenaLIstRadioButton()
string bancoImagenes = "../images/";
List<string> avatar = new List<string>();


foreach(string imagen in avatar)
RadioButtonListAvatar.Items.Add(new ListItem(String.Format("<img src='{0}'>",bancoImagenes + imagen)));
Moises BB
Tuesday, 09 April 2013 00:01:20 (GMT Daylight Time, UTC+01:00)
Thank you very much, it resolved dynamically adding warning icons to my list depending on a flag.
Anit Arca
Please login with either your OpenID above, or your details below.
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

[Captcha]Enter the code shown (prevents robots):

Live Comment Preview