Can I show selected image in RadComboBox?

[Stan]

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

[Shinu]

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.

[Stan]

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

[Ivana]

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

[Juan]

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!

[Princy]

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.

[Stan]

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

[KS]

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