RadComboBox load-on-demand dropdown position problem

2 posts, 0 answers
  1. Ronit
    Ronit avatar
    2 posts
    Member since:
    Mar 2015

    Posted 29 Apr Link to this post

    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:

     


  2. Vessy
    Admin
    Vessy avatar
    2023 posts

    Posted 01 May Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top