This is a migrated thread and some comments may be shown as answers.

I would have only image in the selected item of ComboBox

7 Answers 353 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Giulio
Top achievements
Rank 1
Giulio asked on 15 Jul 2009, 12:14 PM
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

7 Answers, 1 is accepted

Sort by
0
Hessner
Top achievements
Rank 2
answered on 19 Jul 2009, 12:26 PM
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.

 

0
Atanas Korchev
Telerik team
answered on 20 Jul 2009, 07:50 AM
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.
0
Giulio
Top achievements
Rank 1
answered on 20 Jul 2009, 08:20 AM
Thanks, but is possible to set ONLY the set_imageurl client side method? Whitout text...

Thanks.

GF
0
Hessner
Top achievements
Rank 2
answered on 20 Jul 2009, 09:15 AM
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.
0
ManniAT
Top achievements
Rank 2
answered on 20 Jul 2009, 09:49 PM
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
0
Tamar Amit
Top achievements
Rank 1
answered on 18 Jan 2010, 04:27 PM
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?
0
Denny Caldwell
Top achievements
Rank 1
answered on 30 Mar 2010, 11:05 PM
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(); 

Tags
ComboBox
Asked by
Giulio
Top achievements
Rank 1
Answers by
Hessner
Top achievements
Rank 2
Atanas Korchev
Telerik team
Giulio
Top achievements
Rank 1
ManniAT
Top achievements
Rank 2
Tamar Amit
Top achievements
Rank 1
Denny Caldwell
Top achievements
Rank 1
Share this question
or