This is a migrated thread and some comments may be shown as answers.
Can I show selected image in RadComboBox?
7 Answers 151 Views
This is a migrated thread and some comments may be shown as answers.
Stan
Top achievements
Rank 1
Stan asked on 27 Oct 2011, 10:06 PM
RadComboBox can have items with images, but I would like to show the selected image once the dropdown is closed. Is it possible? If not out of the box, what are workarounds?

Thanks,

-Stan

7 Answers, 1 is accepted

Sort by
0
Accepted
Shinu
Top achievements
Rank 1
answered on 28 Oct 2011, 08:07 AM
Hello Stan,

You can try the following javascript to display selected image in RadComboBox.

JS:
function OnClientSelectedIndexChanging(sender, eventArgs)
{
    var input = sender.get_inputDomElement()
    input.style.background = "url(" + eventArgs.get_item().get_imageUrl() + ") no-repeat";
}
function OnClientLoad(sender)
{
    var input = sender.get_inputDomElement()
    var selectedItem = sender.get_selectedItem();
    input.style.background ="url(" + selectedItem.get_imageUrl() + ") no-repeat"
}

Thanks,
Shinu.
0
Stan
Top achievements
Rank 1
answered on 28 Oct 2011, 02:41 PM
Shinu, your method worked, thank you. The only problem is that for some reason OnClientLoad does not fire and would need to find the dropdown and replace the text with image when the page is reloaded.

-Stan
0
Ivana
Telerik team
answered on 31 Oct 2011, 04:14 PM
Hello Stan,

Make sure you have defined a handler for the OnClientLoad client-side event for the RadComboBox, as it is in the following help article: RadComboBox: OnClientLoad.

Regards,
Ivana
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Juan
Top achievements
Rank 1
answered on 15 Mar 2012, 08:55 PM
hi i need apply this style in a only radcombobox not in all combos in my page or in my solution

<style type="text/css">
       div.RadComboBox .rcbInputCell .rcbInput
        {
            padding-left: 22px;
        }
</style>


thanks!
0
Princy
Top achievements
Rank 1
answered on 16 Mar 2012, 06:07 AM
Hello,

Try setting separate CssClass for the RadComboBox.
CSS:
<style type="text/css">
  div.combocss .rcbInputCell .rcbInput
    {
      padding-left: 22px !important;
    }
</style>
ASPX:
<telerik:RadComboBox ID="RadComboBox1" runat="server" CssClass="combocss" .........>
</telerik:RadComboBox>

Thanks,
Princy.
0
Stan
Top achievements
Rank 1
answered on 16 Mar 2012, 01:40 PM
Here is the working code:

function SetFilter(field, value) {
     var grid = $find("<%=Grid.ClientID %>");
     if (grid != null) {
         var tableView = grid.get_masterTableView();
         tableView.filter(field, value, "EqualTo");
     }
 }
 function IconsComboBoxChanging(sender, eventArgs) {
     var item = eventArgs.get_item();
     if (item != null) {
         var input = sender.get_inputDomElement()
         var imageUrl = eventArgs.get_item().get_imageUrl();
         SetBackground(input, imageUrl);
     }
 }
 function SetFilterByIcon(sender, args) {
     var input = sender.get_inputDomElement();
     var status = input.value;
     if (status == "All")
         status = "";
     else {
         // To make it look better while greed reloads
         input.value = "";
     }
     SetFilter("Status", status);
 }
function SetBackground(input, imageUrl) {
             if (imageUrl != null) {
         input.style.background = "url(" + imageUrl + ") no-repeat";
         input.style.backgroundPosition = "left center";
     }
     else
         input.style.background = "";
 }

<telerik:GridTemplateColumn UniqueName="Icons">
                <FilterTemplate>
                    <telerik:RadComboBox ID="IconsComboBox" runat="server" Width="40" DataValueField="AlternativeText"
                         DataTextField="AlternativeText" DataSource='<%#IconList%>'
                         SelectedValue='<%# GetFilterValue("Status") %>'                         
                         OnClientSelectedIndexChanging="IconsComboBoxChanging"
                         OnClientSelectedIndexChanged="SetFilterByIcon">                        
                             <ItemTemplate>
                                  <%# Eval("IconHtmlOrText") %>
                             </ItemTemplate>                                                  
                    </telerik:RadComboBox>        
                </FilterTemplate>
                <ItemTemplate>
                    <%# MakeStatusImageHtml(Eval("StatusCode") as string) %>                    
                </ItemTemplate>
            </telerik:GridTemplateColumn>

It makes me wonder why RadComboBox doesn't support this scenario and we have to work around its limitations. I hope this will help to anyone who
needs to get icons in comboxbox working.

-Stan
0
KS
Top achievements
Rank 1
answered on 23 Sep 2013, 04:00 AM
I'd like to set the background-position of an image sprite on the RadComboBox input, as shown in the following code snippet.  It appears to work initially as I see the new image display while the combobox "is loading" but on completion, the image remains unchanged, and the tooltip (title) also remains unchanged.  Any idea why the Javascript changes do not persist??

I also tried c# code behind since I could not get the input element updates to persist via Javascript.  I'm able to set the tooltip in c# code behind and the change persists, but I don't know how to set the background image in c#.  Is there a way to set the image background position in c# for the input element of the RadComboBox?  The sprite is defined in an external css file for RadComboBox.

.RadComboBox .rcbInputCell INPUT.rcbInput
{
    background-image: url('../images/flags16.png');
    background-repeat: no-repeat;
    padding-left: 24px;
    height: 14px;
    /*font-size:0px; */
}

function OnClientSelectedIndexChangedHandler(sender, eventArgs) {
            var input = sender.get_inputDomElement();
            var combo = $find("<%= IntlCountryCodes.ClientID %>");
            if (combo.get_value() != '-1') {
                combo.trackChanges();
                var x = eventArgs.get_item().get_element();
                var styleProp = "background-position-y";
                if (x.currentStyle)
                    var y = x.currentStyle[styleProp];
                else if (window.getComputedStyle)
                    var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
                 input.style.backgroundPosition = "0 " + y;//-384px;";
                sender.get_element().title = eventArgs.get_item().get_text();
                combo.commitChanges();

Asked by
Stan
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Stan
Top achievements
Rank 1
Ivana
Telerik team
Juan
Top achievements
Rank 1
Princy
Top achievements
Rank 1
KS
Top achievements
Rank 1
Share this question
or