Display Image Beside Selected Item

[Sahil Khan]

Hi,

Is it possible to display an image associated with a particular item beside the selected item? Like in the example at http://demos.telerik.com/aspnet-ajax/combobox/examples/default/defaultcs.aspx, there is a Payment Method combo box with some items in it. Upon viewing the available items we can see the image, but after making a selection the image associated with that particular item is not shown. How can that be achieved?

Thanks.
Regards.

[Shinu]

Hello Sahil,

I am not sure that showing image in TextboxElement is possible with RadComboBox. You can review the following forum link which explains about same scenario.
Display Selected Image in RadComboBox TextBoxElement

-Shinu.

[Sahil Khan]

How are we supposed to achieve a combobox like the one shown in the attached screenshot?

[Simon]

Hello Sahil Khan,

Please see this Code Library which shows a similar approach and try adjusting it to your specific case.

If you have any questions, please feel free to ask them here.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sahil Khan]

Thanks Simon, for the code. I will have a look at it. I also wanted to know that is it possible to achieve the look shown in the attached image with RadCombobox?

Thanks.

Regards,
Sahil

[Simon]

Hello Sahil Khan,

You can use RadToolTip to show additional information. Please see this demo.

Sincerely yours,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sahil Khan]

Thanks Simon for the tip, but I meant the skin of the ComboBox, i.e. can the look shown in the attached image be achieved with RadComboBox?

Thanks.

Regards,
Sahil

[Simon]

Hello Sahil Khan,

You can achieve this look by manually modifying an existing Skin's sprite or creating a new one and modifying/writing the related CSS file. (Using an existing Skin is generally easier.)

On the other hand you can use Visual Style Builder to create or modify a skin which will give you tools to do the necessary modifications. However you will have less control over the end result in contrast to the manual method described above..

Greetings,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sahil Khan]

Thanks for the tip Simon. I checked the example code you linked me to earlier, could you consider adding its support natively to the control in the next iteration?

[Simon]

Hello Sahil Khan,

I am not sure I completely understand you. Can you clarify what do you mean by 'adding its support natively to the control'?

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sahil Khan]

Hi Simon,

I meant could you consider adding support for displaying selected item's image beside it to RadComboBox as a feature?


Thanks
Regards,
Sahil

[Simon]

Hi Sahil Khan,

OK, I will log this feature in our system, so that we consider it for implementation in future versions of RadComboBox.

Thank you for your involvement.

All the best,
Simon
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Sahil Khan]

Hi Simon,

Thanks for the consideration.

Regards,
Sahil

[Martin de Ruiter]

Hi,

I just wanted to add my vote for implementing this feature (image in selected item) natively in radcombobox.

Kind regards,
Martin

[Matthias Heinrich]

me too :)

[Simon]

Hello Matthias Heinrich,

We recently published a Code Library Project on the topic as well. You can see there a prototype of the functionality.

Greetings,
Simon
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[ericTheGoldfish]

How would you modify the above code so that if you set a selected value (other than the first one) on page load it displays the correct value

Thanks
Eric

[Kalina]

Hi ericTheGoldfish,

You can easily set the image in RadComboBox input according to the selected value in this way:

function showSelectedImage(sender) {
    var input = sender.get_inputDomElement();
    var item = sender.get_selectedItem();

    input.style.background =
        "url(" + item.get_imageUrl() + ") no-repeat";
    input.style.paddingLeft = "22px";
}

Please find more details at the sample attached.

Greetings,
Kalina
the Telerik team

[ericTheGoldfish]

Many thanks. Worked perfectly

Eric

[Mayuri]

Hi Kalina... thank you for post it helped me too but how can i show only image and not the text beside inage.

[Vessy]

Hi Mayuri,

Yes, you can remove the Text by removing the value set the the ComboBoxItem Text property:

                <telerik:RadComboBoxItem Text="item1" ImageUrl="Img/img_1.png" />

Regards,
Vessy
Progress Telerik