Change ComboBox Dropdown Image Client Side

[Sean]

Hello everyone,

Using Telerik ASP.NET AJAX Q1 2012 SP1

I'd like to change the drop down arrow of the radcombobox while the combo box loads it's items on the client.  Here is some background of what i've done/tested/got working thus far.  I have a combobox on the page I've attached a $telerik.$(document).ready handler that calls a function to load the combobox.  This all works great.  I've read about using the combox.get_imageDomElement(); in the documentation and then setting the src property to a gif.  However this does not work.

Documentation Line: http://www.telerik.com/help/aspnet-ajax/combobox-client-side-radcombobox.html  see the description for get_imageDomElement()

I've also inspected the return DOM element and tried to manipulate the DOM properties (e.g. style.backgroundImage; currentStyle.backgroundImage) to se the image that way with no luck.

Desired results are as follows: change the triangle image of the drop down to a loading animation gif while the combobox items are loaded, then change it back to the triangle image when everythings ready. This needs to happen client side without post back.

Code examples:
Javascript:

$telerik.$(document).ready(function () {
     LoadComboBox1($telerik.findComboBox("RadComboBox1"));
});

function LoadComboBox1(sender){
     var myComboBox = sender;
     var myComboBoxImage = myComboBox.get_imageDomElement();
     //The loading.gif image is in the same directory as the aspx file
     //This is what is not working properly
     var myComboBoxImage.src = "loading.gif";
     $telerik.$.ajax({
          //ajax post done here removed for clarity this code works perfectly
     });
}

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server"></telerik:RadComboBox>
<telerik:RadCodeBlock ID=RadCodeBlock1" runat="server">
<script type="text/javascript">
//See Javascript Code Block Above
</script>
</telerik:RadCodeBlock>

Any help would greatly be appreciated.

Thanks,
Sean

[Ivana]

Hello Sean,

You are right, setting source of the anchor element in the input area does not work as stated in the documentation. I will take a look at it to see whether it is still valid for RadComboBox.
Meanwhile, here is what  you can do to change the image of drop-down arrow.
Subscribe to the ItemsRequesting and ItemsRequested client events and add the following code in their handlers:

function clientItemsRequesting(sender, args) {
    $telerik.$(".rcbArrowCellRight").css("background", 'url("Images/loading2.gif") 0px 0px');
}


function clientItemsRequested(sender, args) {
    $telerik.$(".rcbArrowCellRight").css("background", 'url("/RadComboBoxTest/WebResource.axd?d=HOhj0c4o_V7XFCrpvSOdOWkkUuXuHkyAYdCHHMRspw1hJeli3v21aVjc5wARb5QT56DU8A3XKpsduZ_ceNdFgrX4pfYxKiyVXObQupsDlwe75jhg9NAsza90xVNiqgmayAQnJacDOV66cGW4PZStvRcFmzklerH6BHo15IAjJx41&t=634696541680000000") 0 -88px');
}

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="250px" Height="150px"
    EmptyMessage="Select a Company" EnableLoadOnDemand="true" ShowMoreResultsBox="false"
    EnableVirtualScrolling="true"
    OnClientItemsRequesting="clientItemsRequesting" OnClientItemsRequested="clientItemsRequested">
</telerik:RadComboBox>

You should keep in mind that the gif image should be adjusted against the style of the RadComboBox. You could use the developer tool of your browser for more information on all the style applied to RadComboBox.

Regards,
Ivana
the Telerik team

[Derek Kepler]

This works great except what if you have several combos on the page and only want to change the background image for a specific one?  The code you provided changes the background image for all combos on the page.

Edit:
I figured it out.

$telerik.$("#" + sender.get_id()).find(".rcbArrowCellRight").css("background", 'Red url("http://www.filingsdirect.com.sv51.premiumwebserver.com/images/icons/RadComboBoxArrowUp_16x16.png") 0px 0px');