solution: a radiobuttonlist with images

[tim]

i looked on this group 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();
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.
tim

 

[Steven Cheng[MSFT]]

Hi Tim,

Welceme here.
Regarding on the RadioButtonList with embedded image and checking behavior,
based on my local test, I've also reproduce it. From the source code, all
the HTML source rendered in firefox and IE browsers are the same, I think
the difference is caused by the different behavior firefox and IE handle
the <img> tag's click event, the IE browser dosn't raise such event up to
the parent element while the firefox does raise it so that the parent
<label> elemetn is also clicked so that make the corresponding radio button
also checked. currently we can use the following means to make the IE
browse also behave like firefox:

In the <img> tag, we can also provide a simple clientside script statement
which reference the <img> tag's parent Element(<labe>) and fire its
"click()" function:

====================
private void PopulateRadioButtonList()
{
string img =
"http://update.microsoft.com/library/toolbar/3.0/images/banners/ms_masthead_
ltr.gif";

for(int i=0;i<10;i++)
{
ListItem li = new ListItem();
li.Text = "<img src=\"" + img + "\"
onclick='this.parentElement.click();' />";
li.Value = "MS_Logo";

rblImage.Items.Add(li) ;
}
}
=====================

In addition, for such scenario, using the ListItem.Text propety to emebeded
the <img> or other html source is somewhat a hack approach, it may broke in
sequential version (e.g the runtime control may HTML Encode the Text
property before render out so that break the html being embedded). So if
you feel it convenient or want to make such UI part more resuable, I'd
recommed you also consider creating a custom control which render list of
radio button together with <img> or any other elements as we like.

Hope helps. Thanks,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)



--------------------
| From: (e-mail address removed)
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Subject: solution: a radiobuttonlist with images
| Date: 3 Nov 2005 10:50:47 -0800
| Organization: http://groups.google.com
| Lines: 28
| Message-ID: <[email protected]>
| NNTP-Posting-Host: 83.141.121.205
| Mime-Version: 1.0
| Content-Type: text/plain; charset="iso-8859-1"
| X-Trace: posting.google.com 1131043852 22953 127.0.0.1 (3 Nov 2005
18:50:52 GMT)
| X-Complaints-To: (e-mail address removed)
| NNTP-Posting-Date: Thu, 3 Nov 2005 18:50:52 +0000 (UTC)
| User-Agent: G2/0.2
| X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.10) Gecko/20050716 Firefox/1.0.6,gzip(gfe),gzip(gfe)
| Complaints-To: (e-mail address removed)
| Injection-Info: g14g2000cwa.googlegroups.com; posting-host=83.141.121.205;
| posting-account=UaxKfw0AAAA4oMLJHydK195yIv1avAma
| Path:
TK2MSFTNGXA01.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli
ne.de!border2.nntp.dca.giganews.com!border1.nntp.dca.giganews.com!nntp.gigan
ews.com!postnews.google.com!g14g2000cwa.googlegroups.com!not-for-mail
| Xref: TK2MSFTNGXA01.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontrols:11648
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
|
| i looked on this group 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();
| 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.
| tim
|
|

 

[tim]

hi steven,
very impressed with the solution. an excellent suggestion.
thanks for taking the time to reply

tim

 

[Steven Cheng[MSFT]]

You're welcome Tim,

Have a good weekend!

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
--------------------
| From: (e-mail address removed)
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontrols
| Subject: Re: solution: a radiobuttonlist with images
| Date: 4 Nov 2005 16:13:37 -0800
| Organization: http://groups.google.com
| Lines: 6
| Message-ID: <[email protected]>
| References: <[email protected]>
| <[email protected]>
| NNTP-Posting-Host: 83.141.121.205
| Mime-Version: 1.0
| Content-Type: text/plain; charset="iso-8859-1"
| X-Trace: posting.google.com 1131149622 7768 127.0.0.1 (5 Nov 2005
00:13:42 GMT)
| X-Complaints-To: (e-mail address removed)
| NNTP-Posting-Date: Sat, 5 Nov 2005 00:13:42 +0000 (UTC)
| In-Reply-To: <[email protected]>
| User-Agent: G2/0.2
| X-HTTP-UserAgent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US;
rv:1.7.10) Gecko/20050716 Firefox/1.0.6,gzip(gfe),gzip(gfe)
| Complaints-To: (e-mail address removed)
| Injection-Info: g44g2000cwa.googlegroups.com; posting-host=83.141.121.205;
| posting-account=UaxKfw0AAAA4oMLJHydK195yIv1avAma
| Path:
TK2MSFTNGXA01.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfeed00.sul.t-online.de!t-onli
ne.de!news.glorb.com!postnews.google.com!g44g2000cwa.googlegroups.com!not-fo
r-mail
| Xref: TK2MSFTNGXA01.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontrols:11694
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontrols
|
| hi steven,
| very impressed with the solution. an excellent suggestion.
| thanks for taking the time to reply
|
| tim
|
|