Telerik rabcombobox - How to set an image for loading comboboxes

Question

Given the following example: http://demos.telerik.com/aspnet-ajax/combobox/examples/functionality/multiplecomboboxes/defaultcs.aspx

I would like to add a small spinning .gif in front of the "loading..." text to indicate activity. Is this possible?

You can look in the "LoadCountries()" javascript function of the example source code to see where the "loading" text gets set.

Answer 1

The text that is displayed is actually a textbox, though you wouldn't know it by looking at it. So, you can't inject an image. What you can do is give it a background-image:

var combo = $find("<%= MyCombo.ClientID %>");
combo.get_inputDomElement().style.backgroundImage = "url(loading.gif)";

It may be better to create a loading class, so you can further define the styles:

.loading .rcbInput
{
    background-image: url(loading.gif);
    background-repeat: no-repeat;
    padding-left: 20px;
}

Then apply it like so:

var combo = $find("<%= MyCombo.ClientID %>");
$telerik.$(combo.get_element()).addClass("loading");

Similarly remove the class once loaded:

var combo = $find("<%= MyCombo.ClientID %>");
$telerik.$(combo.get_element()).removeClass("loading");