RadComboBox load-on-demand dropdown position problem

[Ronit]

I have a screen with RadComboBox with these parameters:

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

 

 

and this code :

 

<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> 

 

 

The problem is when the dropdown is expanding Up and the height of the dropdown is reduced, the dropdown is render far from the combo box input field.

Like that:

 

[Vessy]

Hi Ronit,

I was not able to reproduce the behavior at hand via the provided setup, but you can try the following steps and see if any of them will help:

• remove all custom CSS on the page in order to see if any of the applied styles is not causing the issue
• set the MaxHeight of the whole ComboBox to 220
• Attach a handler to the ComboBox OnClientDropDownOpened event and call the reflow() method of the combo's dropdown element there:
  
  

  <script type="text/javascript">
      function OnClientItemsRequestedHandler(sender, eventArgs) {
         ...
      }
      function reflowComboBox(sender, args) {
          sender.requestItems("");
          sender._dropDown.reflow();
      }
  </script>
  <telerik:RadComboBox ID="RadComboBox1" runat="server" MaxHeight="220"
      OnClientDropDownOpened="reflowComboBox"
      OnClientItemsRequested="OnClientItemsRequestedHandler"
      OnClientDropDownOpening="OnClientItemsRequestedHandler"
      EnableLoadOnDemand="true"
      OnItemsRequested="RadComboBox1_ItemsRequested">
      <ExpandAnimation Type="none" />
      <CollapseAnimation Type="none" />
  </telerik:RadComboBox>

Regards,
Vessy
Progress Telerik