I would have only image in the selected item of ComboBox

[Giulio]

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

[Hessner]

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.

 

[Atanas Korchev]

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.

[Giulio]

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

Thanks.

GF

[Hessner]

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.

[ManniAT]

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

[Tamar Amit]

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?

[Denny Caldwell]

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();
}