I would have only image in the selected item of ComboBox

8 posts, 0 answers
  1. Giulio
    Giulio avatar
    6 posts
    Member since:
    Jan 2008

    Posted 15 Jul 2009 Link to this post

    Hi all, I'm trying to get a ComboBox with:
    • text and image in the items
    • only the image in the SELECTED item
     You can see an example in Tripadvisor web site (upper right corner).
    Is it possible?

    Thanks!

    GF
  2. Hessner
    Hessner avatar
    189 posts
    Member since:
    Mar 2003

    Posted 19 Jul 2009 Link to this post

    I would also like to know if this can be done.

    Have tried to copy the selected item picture to get_imageDomElement - but no success. 

    My pictures are 100x90, so I predict some styling trouble - if it can be done.

     

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Jul 2009 Link to this post

    Hi guys,

    You can use the set_imageUrl client-side method to set the image of a combobox item.

    All the best,
    Albert
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  5. Giulio
    Giulio avatar
    6 posts
    Member since:
    Jan 2008

    Posted 20 Jul 2009 Link to this post

    Thanks, but is possible to set ONLY the set_imageurl client side method? Whitout text...

    Thanks.

    GF
  6. Hessner
    Hessner avatar
    189 posts
    Member since:
    Mar 2003

    Posted 20 Jul 2009 Link to this post

    You talk about replacing the dropdown icon?

    We want to keep the dropdown icon, but replace the text with
    an image instead. I have blank text values in my dropdown - are ONLY using images.

    So the selected value should also be an image.
  7. ManniAT
    ManniAT avatar
    877 posts
    Member since:
    Nov 2003

    Posted 20 Jul 2009 Link to this post

    I guess this is not what you are exactly working for - but it's how I select gender (or language):

        function RCIdxChanged(sender, args) {  
            var iTem = args.get_item();  
            var fA = document.getElementById("myHolder");  
            var vImg = iTem.get_value();  
            fA.innerHTML = "<img src='/Styles/Images/" + vImg + "'/>";  
            //just some element to remove the cursor from the combo  
            var cC = document.getElementById("CursorCatcher");  
            cC.focus();  
        }  
      </script> 
     
       <div style="position:relative">  
      <telerik:RadComboBox runat="server" Width="52px" OnClientSelectedIndexChanged="RCIdxChanged" > 
      <Items> 
      <telerik:RadComboBoxItem runat="server" Value="FeMale.gif" ImageUrl="/Styles/Images/Female.gif" /> 
      <telerik:RadComboBoxItem runat="server" Value="Male.gif" ImageUrl="/Styles/Images/Male.gif" /> 
      </Items> 
      </telerik:RadComboBox> 
      <div id="myHolder" style="position:absolute;width:36px;height:18px;top:2px;left:1px;z-index:2000;"><img src="/Styles/Images/FeMale.gif"/></div> 
      </div> 
      <input type="text" id="CursorCatcher" style="width:0px;height:0px;border:none;" /> 
    You can also use the text property to keep the image name (if you need value).
    In this case you have to provide an item template to avoid the text display.
    --But I'm not sure about item templates - I don't know how to access the item value / text values in the template.
    --I guess there is a way to do this - that's what a template means - but the sample does not show how to achive it.

    Regards

    Manfred
  8. Tamar Amit
    Tamar Amit avatar
    5 posts
    Member since:
    Dec 2009

    Posted 18 Jan 2010 Link to this post

    Hi all
    I was wondering- since your last posts in July - have anyone managed replacing the text of the comboBox header with an image only?
  9. Denny Caldwell
    Denny Caldwell avatar
    2 posts
    Member since:
    Nov 2008

    Posted 30 Mar 2010 Link to this post

    I figured it out. Set the background image of the textbox to the image, and set the image to "no-repeat". In my example, the Text of the selected element is set to the URL of the image to display in the box. The remaining code sets the text to nothing and blurs the box so the cursor isn't displayed.

    function drpPaymentStatus_ClientSelectedIndexChanged(sender, args) { 
     var input = sender.get_inputDomElement(); 
     input.style.backgroundImage = "url("+sender.get_text()+")"
     input.style.backgroundRepeat = "no-repeat"
     sender.set_text(""); 
     input.blur(); 

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017