Change RadComboBox width in client script

6 posts, 0 answers
  1. Gary
    Gary avatar
    57 posts
    Member since:
    Jun 2008

    Posted 06 Mar 2009 Link to this post

    Hi,

    I am using the RadCombobox version 2.1.1/2.2 in an old web application that I need to make updates to.  I am trying to use client side javascript to adjust the width of a RadCombobox using the OnClientDropDownOpening and Closing events.  The Width property does not seem to work for this, I was able to look around the other properties and figured out how to do this, but the scroll bar still displays as the original width.  Two questions, how do I adjust the scroll bar with using jscript and is there another way of displaying only the dropdown items at a larger width, keeping the combo box the same smaller width?  Also, there's got to be another way to adjust the width than what I am doing in the jscript.  Code follows:

        function OnClientDropDownOpening(sender, eventArgs)     
        {     
        sender.S.style.width = 400;  
        }     
     
     
        function OnClientDropDownClosing(sender, eventArgs)     
        {     
        sender.S.style.width = 25;  
        }     
     
     
     
    <radc:RadComboBox ID="ddReasonCode" runat="server" width="25" NoWrap="true" OnClientDropDownOpening="OnClientDropDownOpening" OnClientDropDownClosing="OnClientDropDownClosing">     
         <Items>    
        <radc:RadComboBoxItem runat="server" Text="FB - Explosive and Incendiary" Value="FB" ID="FB"/>    
        <radc:RadComboBoxItem runat="server" Text="FE - Poisons (Toxic Chemicals)-Low Degree" Value="FE" ID="FE"/>    
        <radc:RadComboBoxItem runat="server" Text="FW - Diving" Value="FW" ID="FW"/>    
         </Items>    
    </radc:RadComboBox>    
     
  2. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 06 Mar 2009 Link to this post

    Hi Gary,

    I suggest you set DropDownWidth property of RadComboBox to set the width to 400px.

    Best wishes,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Gary
    Gary avatar
    57 posts
    Member since:
    Jun 2008

    Posted 06 Mar 2009 Link to this post

    Thanks Yana,

    But I would like to do this in javascript when the user clicks the combobox.  What javascript syntax works?  I tried Width, DropDownWidth, etc.  I also want to change the scrollbar width in javascript.  Thanks

    Gary
  5. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 06 Mar 2009 Link to this post

    Hi Gary,

    Please try the following code:

    <script type="text/javascript">  
        function OnClientDropDownOpening(sender, eventArgs)        
        {        
           // sender.S.style.width = 400;   
          var dropDownPlaceHolder =
                
    document.getElementById(sender.DropDownPlaceholderID);  
          dropDownPlaceHolder.style.minWidth = "400px";  
          var dropDown = document.getElementById(sender.DropDownID);  
          dropDown.style.minWidth = "400px";  
        }        
        
        
        function OnClientDropDownClosing(sender, eventArgs)        
        {        
            var dropDownPlaceHolder =
                    
    document.getElementById(sender.DropDownPlaceholderID);  
            dropDownPlaceHolder.style.minWidth = "40px";  
            var dropDown = document.getElementById(sender.DropDownID);  
            dropDown.style.minWidth = "40px";     
        }        
    </script>  

    Kind regards,
    Yana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Vance Smith
    Vance Smith avatar
    36 posts
    Member since:
    Jun 2012

    Posted 19 Feb 2013 Link to this post

    This no longer works for current versions of RadComboBox. I am able to change the size of the input element with the following code, but the containing box still stays the same width. You will see the red background im temporarily applying illustrate whats happening. (See attachment)

    function OnClientDropDownOpened(sender, eventArgs) {
        var combo = $find("<%= CB.ClientID %>");
        $("#SearchAllDiv").css("display", "");
        $(combo).css("width", "500px");
        var inputArea = combo.get_inputDomElement();
        inputArea.style.width = "500px";
        inputArea.style.backgroundColor = "red";
    }


    Help!
  7. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 22 Feb 2013 Link to this post

    Hello Vance,

    I can suggest you to get reference the DOM Element of the RadComboBox and alter the width. As I can see, you only obtain a reference to the RadComboBox object. Please consider the following implementation in order to correctly style the width of the RadComboBox:

    <script type="text/javascript">
     
            var $ = $telerik.$;
            function OnClientDropDownOpening(sender, eventArgs) {
     
                var combo = $find("<%= ddReasonCode.ClientID %>");
                $(combo.get_element()).css("width", "500px");
                var inputArea = combo.get_inputDomElement();
                inputArea.style.backgroundColor = "red";
                var dropDown = combo.get_dropDownElement();
                $(dropDown).css("width", "500px");
            }
     
        </script>



    All the best,
    Nencho
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017