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

Change RadComboBox width in client script

5 Answers 361 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 06 Mar 2009, 12:14 PM
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>    
 

5 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 06 Mar 2009, 03:44 PM
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.
0
Gary
Top achievements
Rank 1
answered on 06 Mar 2009, 03:49 PM
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
0
Yana
Telerik team
answered on 06 Mar 2009, 04:02 PM
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.
0
Vance Smith
Top achievements
Rank 1
answered on 19 Feb 2013, 06:01 PM
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!
0
Nencho
Telerik team
answered on 22 Feb 2013, 09:56 AM
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.
Tags
ComboBox
Asked by
Gary
Top achievements
Rank 1
Answers by
Yana
Telerik team
Gary
Top achievements
Rank 1
Vance Smith
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or