This is a migrated thread and some comments may be shown as answers.

Change ComboBox Dropdown Image Client Side

2 Answers 103 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Sean
Top achievements
Rank 1
Sean asked on 30 Apr 2012, 06:57 PM
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

2 Answers, 1 is accepted

Sort by
0
Ivana
Telerik team
answered on 03 May 2012, 07:51 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Derek Kepler
Top achievements
Rank 1
answered on 09 Aug 2012, 11:57 PM
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');
Tags
ComboBox
Asked by
Sean
Top achievements
Rank 1
Answers by
Ivana
Telerik team
Derek Kepler
Top achievements
Rank 1
Share this question
or