Completed
Last Updated: 21 Apr 2022 12:25 by ADMIN
JeffSM
Created on: 03 Sep 2014 19:12
Category: ComboBox
Type: Feature Request
0
combox with image
It gonna be cool if ComboBox display his picture with text, like the pic shows.
1 comment
ADMIN
Rumen
Posted on: 21 Apr 2022 12:25

Hi Jefferson,

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>

 

Regards,
Rumen
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.