Set drop down height of radcombobox dynamically

[MRa]

i'm setting the scroll area of the radgrid dynamically on gridcreated:

               var heightResolution = screen.height;
                var screenHeight = heightResolution - (heightResolution * 0.40);

                $get("content").style.height = screenHeight;

                var scrollArea = sender.GridDataDiv;

                scrollArea.style.height = screenHeight + "px";

is there any way to do something similar with the drop down portion of the radcombobox?

I'd like to set the height to a specific percentage of the page based on user's resolution.

[Hristo Valyavicharski]

Hi,

Probably there are multiple approaches you can use, but here are two of them:

• Get screen resolution on the server as described in this forum post and set the MaxHeight property of the combo in its OnInit event:

  protected void RadComboBox1_Init(object sender, EventArgs e)
  {
      RadComboBox1.MaxHeight = 300;
  }

• Set the height of the combo on the client. For example in the OnClientDropDownOpened event:

  function OnClientDropDownOpened(sender, args) {
      setTimeout(function () {
          $('.rcbScroll.rcbWidth').height(60);
      }, 10);
  }

Regards,
Hristo Valyavicharski
Telerik

[Allen]

I realize this is an ancient comment, but shouldn't this say something about the dropdown height, not the scroll width?

[Rumen]

You can use the sender.get_dropDownElement().style.height attribute to specify the dropdown height:

<script>    
    function OnClientDropDownOpened(sender, args) {
        sender.get_dropDownElement().style.height = "250px"
    }
</script>
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" EnableAriaSupport="true" CheckBoxes="true" AriaSettings-Label="MyCombo"
    OnClientDropDownOpened="OnClientDropDownOpened">
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
    <Items>
        <telerik:RadComboBoxItem Text="Item 1" />
        <telerik:RadComboBoxItem Text="Item 2" />
        <telerik:RadComboBoxItem Text="Item 3" />
        <telerik:RadComboBoxItem Text="Item 4" />
    </Items>
</telerik:RadComboBox>

[Allen]

OK.  Thank you.

 

Actually, the DropDownCssClass property of the RadComboBox ultimately worked better for me. 

[Rumen]

Yes, that's yet another solution, Allen! Thanks for sharing it :)