Change ComboBox Dropdown Image Client Side

3 posts, 0 answers
  1. Sean
    Sean avatar
    10 posts
    Member since:
    Jan 2009

    Posted 30 Apr 2012 Link to this post

    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:  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:
    $telerik.$(document).ready(function () {
    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";
              //ajax post done here removed for clarity this code works perfectly

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

    Any help would greatly be appreciated.

  2. Ivana
    Ivana avatar
    657 posts

    Posted 03 May 2012 Link to this post

    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"
        OnClientItemsRequesting="clientItemsRequesting" OnClientItemsRequested="clientItemsRequested">
    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.

    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.
  3. Derek Kepler
    Derek Kepler avatar
    2 posts
    Member since:
    Mar 2010

    Posted 09 Aug 2012 Link to this post

    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.

    I figured it out.
    $telerik.$("#" + sender.get_id()).find(".rcbArrowCellRight").css("background", 'Red url("") 0px 0px');
Back to Top