Setting the Minimum Width of RadComboBox Dropdown in ASP.NET AJAX
Environment
Property | Value |
---|---|
Product | RadComboBox for ASP.NET AJAX |
Version | all |
Description
To ensure that the dropdown of a RadComboBox is always at least as wide as the combobox itself, you can use the following approach:
Solution
- Add the following JavaScript code to your page:
<script>
function OnClientDropDownOpening(sender, args) {
var comboboxWidth = sender.get_wrapper().parentElement.style.width;
sender.get_dropDownElement().style.minWidth = comboboxWidth;
}
</script>
- In your RadComboBox markup, add the
OnClientDropDownOpening
event handler and set theDropDownAutoWidth
property to "Enabled".
<telerik:RadComboBox ID="RadComboBox1" DropDownAutoWidth="Enabled" Width="150px" OnClientDropDownOpening="OnClientDropDownOpening" runat="server">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
This code will ensure that the dropdown width of the RadComboBox matches the width of the combobox itself if the width based on the contents is smaller than the combobox's width.