Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / ComboBox / Set the Height of RadComboBox based on number of items

Set the Height of RadComboBox based on number of items

Article Info

Rating: 3

Article information

Article relates to

 RadComboBox "classic"
 RadComboBox for ASP.NET AJAX (Prometheus)
 Telerik.Web.UI 2008.1.x

Created by

 Veskoni, Telerik

Last modified by

 Veskoni, Telerik


HOW-TO
Set the Height of RadComboBox in the code behind, depending on the number of items.

NOTE:  RadComboBox has a new property called MaxHeight started from Q3 2008. It allows the height of the dropdown to vary depending on the number of items. If the number of items is large - the height will not exceed the MaxHeight value. Please use that property whenever possible.

SOLUTION
The Height is calculated by multiplying the number of items and the height of a single item.
The constant MAX_ALLOWED_HEIGHT is used to limit the Height of the combo to a specific value which we do not want to pass.

Here is the code for both versions:

C#:
protected void Page_Load(object sender, EventArgs e) 
{ 
    //set the max allowed height of the combo 
    int MAX_ALLOWED_HEIGHT = 220; 
    //this is the single item's height 
    int SINGLE_ITEM_HEIGHT = 22; 
    //calculate the Height based on number of items 
    int calculatedHeight = RadComboBox1.Items.Count * SINGLE_ITEM_HEIGHT; 
 
    if (calculatedHeight > MAX_ALLOWED_HEIGHT) 
    { 
        RadComboBox1.Height = MAX_ALLOWED_HEIGHT; 
    } 
    else 
    { 
        RadComboBox1.Height = calculatedHeight; 
    } 
} 

This solution works fine in non load-on-demand scenario.

Here is a solution for RadComboBox for ASP.NET AJAX for load-on-demand scenario:

<telerik:RadComboBox ID="RadComboBox1" runat="server"  
    OnClientItemsRequested="OnClientItemsRequestedHandler" 
    OnClientDropDownOpening="OnClientItemsRequestedHandler" 
    EnableLoadOnDemand="true"             
    OnItemsRequested="RadComboBox1_ItemsRequested"> 
    <ExpandAnimation Type="none" /> 
    <CollapseAnimation Type="none" /> 
</telerik:RadComboBox> 

<script type="text/javascript"> 
function OnClientItemsRequestedHandler(sender, eventArgs) 
{ 
    //set the max allowed height of the combo  
    var MAX_ALLOWED_HEIGHT = 220; 
    //this is the single item's height  
    var SINGLE_ITEM_HEIGHT = 22; 
 
    var calculatedHeight = sender.get_items().get_count() * SINGLE_ITEM_HEIGHT; 
 
    var dropDownDiv = sender.get_dropDownElement(); 
     
    if (calculatedHeight > MAX_ALLOWED_HEIGHT)  
    {  
        setTimeout ( 
            function () { 
                dropDownDiv.firstChild.style.height = MAX_ALLOWED_HEIGHT + "px";  
            }, 20 
        );                 
    }  
    else  
    {  
        setTimeout ( 
            function () { 
                dropDownDiv.firstChild.style.height = calculatedHeight + "px";  
            }, 20 
        ); 
    } 
}         
</script> 


Comments

If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.