Change RadComboBox width in client script

[Gary]

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>

[Yana]

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.

[Gary]

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

[Yana]

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.

[Vance Smith]

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!

[Nencho]

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