Can I show selected image in RadComboBox?

8 posts, 1 answers
  1. Stan
    Stan avatar
    36 posts
    Member since:
    Feb 2011

    Posted 27 Oct 2011 Link to this post

    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
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 28 Oct 2011 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Stan
    Stan avatar
    36 posts
    Member since:
    Feb 2011

    Posted 28 Oct 2011 Link to this post

    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
  5. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 31 Oct 2011 Link to this post

    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
  6. Juan
    Juan avatar
    20 posts
    Member since:
    Jan 2012

    Posted 15 Mar 2012 Link to this post

    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!
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 16 Mar 2012 Link to this post

    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.
  8. Stan
    Stan avatar
    36 posts
    Member since:
    Feb 2011

    Posted 16 Mar 2012 Link to this post

    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
  9. KS
    KS avatar
    1 posts
    Member since:
    Sep 2013

    Posted 22 Sep 2013 Link to this post

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

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