RadComboBox autoresize and dropdown position

17 posts, 1 answers
  1. LevizBB
    LevizBB avatar
    8 posts
    Member since:
    Jun 2011

    Posted 09 Jun 2011 Link to this post

    Hello,

    I have two problems with my RadComboBox :

    1. The RadComboBox doesn't resize automatically when we resize the browser window.
    2. When we open the RadComboBox we show the dropdown, so far all is well, but when we "scroll" on the page, the dropdown detach from the input field (as you can show in the two picture attached below).

    Here is the ASP.NET code :
                                                
    <telerik:RadComboBox ID="PrjComboBox" runat="server"
        AllowCustomText="true"    
        MaxLength="500"
        Width="80%"
        OnPreRender="PrjComboBox_PreRender">
        <ItemTemplate>
            <div>
                <asp:CheckBox runat="server" ID="PrjComboBoxItemCheckBox"
                    Checked="false"
                    onclick="onPrjComboBoxItemCheckBoxClick(this)"/>
                <asp:Label runat="server" ID="PrjComboBoxItemLabel"
                                AssociatedControlID="PrjComboBoxItemCheckBox"
                                    Text='<%# DataBinder.Eval(Container, "Value") %>'>
                            </asp:Label>
                     </div>
        </ItemTemplate>                                                   
    </telerik:RadComboBox>

    Thanks for your help!

  2. Answer
    Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 13 Jun 2011 Link to this post

    Hello LevizBB,

    I am afraid that resizing the RadComboBox control upon browser window resizing is not supported.

    We are aware of the second issue that you describe and I can suggest you an approach to overcome it.
    Please nest the RadComboBox in a div and attach a scroll event to this container. Then at the scroll event handler you can close the RadComboBox dropdown in this manner:
    <script type="text/javascript" language="javascript">
        function pageLoad() {
            $telerik.$("#container").scroll(function() {
     
                var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
     
                if (combos != null) {
                    for (var i = 0; i < combos.length; i++) {
                        var combo = combos[i];
                        if (combo.get_dropDownVisible())
                            combo.hideDropDown();
                    }
                }
            });
        }
    </script>

    Please find more details in the sample attached.

    Greetings,
    Kalina
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. LevizBB
    LevizBB avatar
    8 posts
    Member since:
    Jun 2011

    Posted 21 Jun 2011 Link to this post

    Thanks for your help.

    For the RadCombobox I will set a short width, so that, it will work on mains window sizes.

  5. John
    John avatar
    5 posts
    Member since:
    Aug 2011

    Posted 24 Aug 2011 Link to this post

    I too am having issues with scrolling and the RadComboBox.  The issue appears to be that the drop down menu moves more than the other elements on the page when you scroll.  if I move all the way to the top of the page, my drop down menu appears exactly where i want it too.  but if i scroll down any, the drop down appears higher than the original input control.  the farther down the page I scroll, the farther away the drop down window moves from its calling container.

    the Solution you provided did not help move the dropdown back in place, but instead just hides the drop down when the page is scrolled.  The drop down still does not render in the approprate place. I found that this does not happen on Chrome. 
  6. John
    John avatar
    5 posts
    Member since:
    Aug 2011

    Posted 24 Aug 2011 Link to this post

    My appologies, I overlooked a key value in my masterpage.  the page was setup to IE=8 and I am currently running IE9.  changing that fixed my problem.
  7. Jimmy
    Jimmy avatar
    1 posts
    Member since:
    Feb 2011

    Posted 28 Dec 2011 Link to this post

    I am having the same problem with the radCombobox dropdown position when scrolling the page. Anyone have a solution for this issue, please help. I am using telerik released on May 2011.
  8. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 03 Jan 2012 Link to this post

    Hi Jimmy,

    The approach described below helps to overcome the issue.
    Have you tried it?

    Regards,
    Kalina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. Vik
    Vik avatar
    4 posts
    Member since:
    Mar 2012

    Posted 03 May 2012 Link to this post

    Any new information about this problem?

    I have tried the proposed solution and it works but isn't another way to overcome it?

    Using CSS or to make the DropDownList move along with the ComboBox while scrolling?
  10. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 03 May 2012 Link to this post

    Hello Vik,

    We have already tried various ways to overcome the issue and the approach that I have already suggested here is the only one that resolves it.

    Regards,
    Kalina
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. Vik
    Vik avatar
    4 posts
    Member since:
    Mar 2012

    Posted 18 May 2012 Link to this post

    Could try blocking the page scroll at the onscroll event instead of having the dropdown list or the datepicker popup to disapear.
  12. Mahmoud
    Mahmoud avatar
    1 posts
    Member since:
    Jun 2013

    Posted 13 Jun 2013 Link to this post

    function pageLoad() {
    $telerik.$("#container").scroll(function() {
    var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
    if (combos != null) {
    for (var i = 0; i < combos.length; i++) {
    var combo = combos[i];
    if (combo.get_dropDownVisible())
    combo.hideDropDown();
    }
    }
    });
    kindly this code very nice but i face this problem with datepicker, any one can help me to rite the same code but for date picker?
  13. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 18 Jun 2013 Link to this post

    Hi Mahmoud,

    Have you tried to enable the screen boundary detection of the picker?
     http://demos.telerik.com/aspnet-ajax/calendar/examples/datepicker/custompopup/defaultcs.aspx

    Hope this helps.

    Regards,
    Eyup
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  14. Subodh
    Subodh avatar
    9 posts
    Member since:
    Jun 2013

    Posted 10 Jul 2013 Link to this post

    Hello Telerik Team,

                 We are facing same issue in Telerik Rad Scheduler control. We are using Rad Combo box in Rad Scheduler, when we scroll page combo box get displaced.  Please provide your solutions on it. I attached Screen Shots.
  15. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 15 Jul 2013 Link to this post

    Hello Subodh,

    You could find the workaround in the posts above. You could capture the scroll event and use the hideDropDown() method, in order to hide the dropdown of the RadComboBox.

    <script type="text/javascript" language="javascript">
        function pageLoad() {
            $telerik.$("#container").scroll(function() {
      
                var combos = Telerik.Web.UI.RadComboBox.ComboBoxes;
      
                if (combos != null) {
                    for (var i = 0; i < combos.length; i++) {
                        var combo = combos[i];
                        if (combo.get_dropDownVisible())
                            combo.hideDropDown();
                    }
                }
            });
        }
    </script>


    Regards,
    Nencho
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  16. Subodh
    Subodh avatar
    9 posts
    Member since:
    Jun 2013

    Posted 22 Jul 2013 Link to this post

    Hello Nencho,

                              Thank you for reply, Actually I am using Rad Scheduler control to add appointment, when my popup get open, combo box from that drop down get disturbed when i open that drop down, I was try your posted code but it not working fro rad scheduler, Any another way to avoid this Issue?
  17. Plamen
    Admin
    Plamen avatar
    2730 posts

    Posted 24 Jul 2013 Link to this post

    Hi,

     In this case you should find RadComboBox and use the code that Nencho suggested in the onClientFormCreated event of RadScheduler as for example in the Clear selection for the user combobox if no room is selected section of this help topic.

    Hope this will be helpful.

    Regards,
    Plamen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  18. Anatoliy
    Anatoliy avatar
    37 posts
    Member since:
    Oct 2012

    Posted 13 Jan 2015 in reply to Plamen Link to this post

    Hi,
    I am having the same problem during scrolling with Scheduler Appointment window
    and drop-down list's controls (datepicker, combobox) in it.

    I hope somebody help me to improve attached project with some of this ways:
     - pin drop-down list to their parent control (most expected);
     - closing opened drop-down list's on scrolling*;
     - disabling all page scrolling on opening "Insert|Update appointment" window since it closed**.

    *Solution with hiding all comboboxes, mentioned in this topic, works fine, 
    than what about others drop-down list's controls.







Back to Top
UI for ASP.NET Ajax is Ready for VS 2017