This is a migrated thread and some comments may be shown as answers.

RadComboBox load-on-demand dropdown position problem

1 Answer 60 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Ronit
Top achievements
Rank 1
Ronit asked on 29 Apr 2019, 11:23 AM

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:

 


1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 01 May 2019, 12:37 PM
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.
Tags
ComboBox
Asked by
Ronit
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or