solution: a radiobuttonlist with images

Discussion in 'ASP .Net Web Controls' started by tim@mackey.ie, Nov 3, 2005.

  1. Guest

    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
     
    , Nov 3, 2005
    #1
    1. Advertising

  2. 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:
    | 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: <>
    | 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:
    | 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:
    | 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
    |
    |
     
    Steven Cheng[MSFT], Nov 4, 2005
    #2
    1. Advertising

  3. Guest

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

    tim
     
    , Nov 5, 2005
    #3
  4. 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:
    | 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: <>
    | References: <>
    | <>
    | 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:
    | NNTP-Posting-Date: Sat, 5 Nov 2005 00:13:42 +0000 (UTC)
    | In-Reply-To: <>
    | 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:
    | 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
    |
    |
     
    Steven Cheng[MSFT], Nov 5, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Les Caudle
    Replies:
    0
    Views:
    507
    Les Caudle
    May 11, 2004
  2. Andrew Francis
    Replies:
    0
    Views:
    449
    Andrew Francis
    Jun 28, 2006
  3. =?Utf-8?B?Y2FzaGRlc2ttYWM=?=

    Solution file not in the solution folder

    =?Utf-8?B?Y2FzaGRlc2ttYWM=?=, Sep 12, 2006, in forum: ASP .Net
    Replies:
    2
    Views:
    1,154
    Laurent Bugnion
    Sep 12, 2006
  4. Nofear

    RadioButtonList and SelectedIndexChanged event solution

    Nofear, Jan 6, 2004, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    167
    Nofear
    Jan 6, 2004
  5. Dunno
    Replies:
    0
    Views:
    225
    Dunno
    May 16, 2005
Loading...

Share This Page