[Solved] Maximum Height?

[Chris]

Is there a way to set a maximum height on the ComboBox's dropdown?  We have several ComboBoxes on forms where we do not know how many items will be in the list.  We want the dropdown to be as small as possible, and if it will be longer than say 300px, display scroll bars.  The problem is if we just set the height to 300px right now, if the list only has 3 items in it there is a large blank space.

Right now we are just setting the height of the ComboBox server side if the count exceeds a certain amount, but this is very inconsistant as not only can some of the items wrap around to multiple lines of text but also as different font sizes are chosen on the browser other problems occur.

I guess ideally we want the control to behave like a traditional html dropdown within the browser in terms of having it automatically figure out if it will fit within the current window and if not introduce then introduce scroll bars.  Any suggestions?

[Rosi]

Hello Chris,

I suggest checking this KB article:

(ID#956) Set the Height of RadComboBox based on number of items

I hope this helps.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Chris]

Unfortunately that doesn't take care of items that wrap text to multiple lines.  What about some client side java script to determine the height of the contents?

[Rosi]

Hello Chris,

You can use the following code to determine the needed height:

<script>
        function calculateHeight()
        {
            var combo = $find("RadComboBox1");
            var calculatedHeight = 0;

            for(var i=0; i<combo.get_items().get_count(); i++)
            {
                calculatedHeight += combo.get_items().getItem(i).get_element().offsetHeight;

            }
            alert(calculatedHeight);
        }
    </script>

Note that this code have to be executed only when the dropdown is opened. For an example you can call it in the OnClientDropDownOpened event handler. If the dropdown is not visible the method will return 0.

Hope this helps.

Regards,
Rosi
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Bill]

First off, OnClientDropDownOpened does not exist, closest thing I found is OnClientDropDownOpening which is not very useful in this situation because only the first item is rendered.

And I could not get the script to work either -- combo.get_items() cannot be recognized.

Please make sure your code works ( at least not too far off ), before posting it as answers.

[Paul]

Hello Bill,

Could you please specify the exact version of RadComboBox that your use? The OnClientDropDownOpened is not available in the "Classic" version of RadComboBox for ASP.NET (and we have a suspicion that you use that version), but your forum post is under the RadComboBox for ASP.NET AJAX category.

Regards,
Paul
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Wendy Hunt]

Hi Rosi -

I couldn't find the article you mentioned.  Is there another article I could refer to to solve a similar behavior issue.  I have a combo box that has about 30 or so values, but I'd like to only display 10 at a time and have the scroll bar available for finding the others in the list.  Right now the list that appears is going through the length of the page.

Thanks for any help!

wen

[Shinu]

Hello,

Set the Height of combo according to the number of items as shown here.

cs:

    protected void Page_Load(object sender, EventArgs e)
    {
        int MAX_ALLOWED_HEIGHT = 190;
        //this is the single item's height
        int SINGLE_ITEM_HEIGHT = 22;
        //calculate the Height based on number of items
        int calculatedHeight = RadComboBox10.Items.Count * SINGLE_ITEM_HEIGHT;

        if (calculatedHeight > MAX_ALLOWED_HEIGHT)
        {
            RadComboBox10.Height = MAX_ALLOWED_HEIGHT;
        }
        else
        {
            RadComboBox10.Height = calculatedHeight;
        }
    }

Here is the KB article which describes how to set the Height of RadComboBox in the code behind.
Set the Height of RadComboBox based on number of items

-Shinu.