Showing the image icon of the selected item in the combobox input

Environment

Product

RadComboBox for ASP.NET AJAX

Description

Find below a solution of how to display programmatically the icon of the selected dropdown item in the input box of the combobox control.

Solution

You can achieve the requested functionality with the client-side API of the combobox:

<style>
    .RadComboBox .rcbInput {
        padding-left: 30px;
    }
</style>
<telerik:RadComboBox ID="uxIconCombo" runat="server"
    OnClientLoad="OnClientLoad"
    OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
    <Items>
        <telerik:RadComboBoxItem runat="server" ImageUrl="~/Images/Icon1.png" Text="Item 1" />
        <telerik:RadComboBoxItem runat="server" ImageUrl="~/Images/Icon2.png" Text="Item 2" />
    </Items>
</telerik:RadComboBox>
<script>
    function OnClientLoad(sender, args) {
        var input = sender.get_inputDomElement();
        input.style.backgroundImage = "url(" + sender.get_selectedItem().get_imageUrl() + ")";
        input.style.backgroundRepeat = "no-repeat";
    }

    function OnClientSelectedIndexChanged(sender, args) {
        var input = sender.get_inputDomElement();
        input.style.backgroundImage = "url(" + args.get_item().get_imageUrl() + ")";
        input.style.backgroundRepeat = "no-repeat";
        input.blur();
    }
</script>