Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP .Net Web Controls > solution: a radiobuttonlist with images

Reply
Thread Tools

solution: a radiobuttonlist with images

 
 
tim@mackey.ie
Guest
Posts: n/a
 
      11-03-2005
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

 
Reply With Quote
 
 
 
 
Steven Cheng[MSFT]
Guest
Posts: n/a
 
      11-04-2005
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: http://www.velocityreviews.com/forums/(E-Mail Removed)
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontro ls
| Subject: solution: a radiobuttonlist with images
| Date: 3 Nov 2005 10:50:47 -0800
| Organization: http://groups.google.com
| Lines: 28
| Message-ID: <(E-Mail Removed) .com>
| 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 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 Removed)
| Injection-Info: g14g2000cwa.googlegroups.com; posting-host=83.141.121.205;
| posting-account=UaxKfw0AAAA4oMLJHydK195yIv1avAma
| Path:
TK2MSFTNGXA01.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfee d00.sul.t-online.de!t-onli
ne.de!border2.nntp.dca.giganews.com!border1.nntp.d ca.giganews.com!nntp.gigan
ews.com!postnews.google.com!g14g2000cwa.googlegrou ps.com!not-for-mail
| Xref: TK2MSFTNGXA01.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontro ls:11648
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontro ls
|
| 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
|
|

 
Reply With Quote
 
 
 
 
tim@mackey.ie
Guest
Posts: n/a
 
      11-05-2005
hi steven,
very impressed with the solution. an excellent suggestion.
thanks for taking the time to reply

tim

 
Reply With Quote
 
Steven Cheng[MSFT]
Guest
Posts: n/a
 
      11-05-2005
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 Removed)
| Newsgroups: microsoft.public.dotnet.framework.aspnet.webcontro ls
| Subject: Re: solution: a radiobuttonlist with images
| Date: 4 Nov 2005 16:13:37 -0800
| Organization: http://groups.google.com
| Lines: 6
| Message-ID: <(E-Mail Removed). com>
| References: <(E-Mail Removed) .com>
| <(E-Mail Removed)>
| 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 Removed)
| NNTP-Posting-Date: Sat, 5 Nov 2005 00:13:42 +0000 (UTC)
| In-Reply-To: <(E-Mail Removed)>
| 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 Removed)
| Injection-Info: g44g2000cwa.googlegroups.com; posting-host=83.141.121.205;
| posting-account=UaxKfw0AAAA4oMLJHydK195yIv1avAma
| Path:
TK2MSFTNGXA01.phx.gbl!TK2MSFTNGP08.phx.gbl!newsfee d00.sul.t-online.de!t-onli
ne.de!news.glorb.com!postnews.google.com!g44g2000c wa.googlegroups.com!not-fo
r-mail
| Xref: TK2MSFTNGXA01.phx.gbl
microsoft.public.dotnet.framework.aspnet.webcontro ls:11694
| X-Tomcat-NG: microsoft.public.dotnet.framework.aspnet.webcontro ls
|
| hi steven,
| very impressed with the solution. an excellent suggestion.
| thanks for taking the time to reply
|
| tim
|
|

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
DataList with RadioButtons + Images: How to click on the images to activate the radiobutton? Luis Esteban Valencia Muņoz ASP .Net 0 06-03-2005 03:22 PM
Track Images added to images folder and subfolders - send out email alerts ASP .Net 4 01-04-2005 10:01 PM
Tool for converting 12-bit TIFF images to 16-bit TIFF-images? Peter Frank Digital Photography 11 12-13-2004 02:41 AM
radiobuttonlist that shows images as well as text? Les Caudle ASP .Net 0 05-10-2004 11:42 PM
Can recover old images from SmartMedia card, but not recent images Stephen Stormont Digital Photography 9 10-20-2003 07:59 PM



Advertisments