How to collapse callendar/time/combobox popup when parent container scrolls

Thread is closed for posting
2 posts, 0 answers
  1. BA7B1053-F3D3-436B-86C2-560580A462D3
    BA7B1053-F3D3-436B-86C2-560580A462D3 avatar
    35 posts
    Member since:
    Nov 2006

    Posted 23 Jul 2010 Link to this post


    RadControls version

    Telerik.Web.UI.2008.3 -

    .NET version


    Visual Studio version


    programming language


    browser support

    all browsers supported by RadControls

    The issue raised when a RadDatePicker/RadDateTimePicker/RadComboBox control is placed inside a scrollable container element, for example in RadSplitter pane or in simple <div style="overflow:auto">.
    1. place RadDatePicker/RadDateTimePicker/RadComboBox control inside a scrollable container;
    2. ensure that the content of the scrollable container element is large enough to make the scrollbars visible;
    3. click the popup button to show calendar/time/combobox popup;
    4. scroll the parent element;

    * content is scrolled along with the control, the control's popup is misplaced.

    The problem is inherent to the control structure since the popup element is appended to the topmost body/form element and does not know anything about owner control location.

    Implement a workaround which tracks scroll event and calls hide popup methods when appropriate.

    Fixing of the control prototypes implemented in the scope of the fix utility. Methods of the utility are called on the page init.
    The code below contains calls to utility methods with self-describing names.

    // fixes the prototype of the control with popup functionality so that 
    // it closes the popup when a scrollable parent element, if any, scrolls. 
    this.fixPopupControlForScroll = function(controlPrototype, hideMethod){ 
        var base_initialize = controlPrototype.initialize; 
        controlPrototype.initialize = function(){ 
            // find parent scrollable element 
            var scrollableParent = $wf.dom.findUp(this.get_element(), function(node){ 
                var style = $wf.dom.getCurrentStyle(node); 
                return style && (style.overflowX == "auto"
                  || style.overflowX == "scroll"
                  || style.overflowY == "auto"
                  || style.overflowY == "scroll"); 
            if (!scrollableParent) 
            var me = this
                scrollableParent_scroll = function(e){ 
                    hideMethod.apply(me, [e]); 
                $addHandler(scrollableParent, "scroll", scrollableParent_scroll); 
                if (scrollableParent._events) // when parent is not disposed first 
                    $removeHandler(scrollableParent, "scroll", scrollableParent_scroll); 
                me = scrollableParent = scrollableParent_scroll = null
    // fix date/time pickers 
    this.fixPopupControlForScroll(datePickerPrototype, function(e){ 
        if (this.isPopupVisible()){ 
            var calendarPopup = this.get__popup(); 
            // change the hide animation duration to 0 
            // in order to make it hide at once 
            var hideDuration = calendarPopup.HideAnimationDuration; 
            calendarPopup.HideAnimationDuration = 0; 
            } finally { 
                calendarPopup.HideAnimationDuration = hideDuration; 
        var timePopup; 
        if (this.get_timeView && this.get_timeView() 
          && (timePopup = this.get__TimePopup()).IsVisible()){ 
            // change the hide animation duration to 0 
            // in order to make it hide at once 
            var hideDuration = timePopup.HideAnimationDuration; 
            timePopup.HideAnimationDuration = 0; 
            } finally { 
                timePopup.HideAnimationDuration = hideDuration; 
    // fix combobox 
    this.fixPopupControlForScroll(radComboBoxPrototype, function(e){ 
        if (!this.get_dropDownVisible()) 
        // change the collapse animation type to None 
        // in order to make it close at once 
        var collapseAnimType = this._slide._collapseAnimation._type; 
        this._slide._collapseAnimation._type = Telerik.Web.UI.AnimationType.None; 
        } finally { 
            this._slide._collapseAnimation._type = collapseAnimType; 

    Would be nice to implement such functionality in the core telerik controls, however it might introduce unwanted overhead.


  2. 8300C70A-CB4B-404C-ABEA-2A727C2CDF57
    8300C70A-CB4B-404C-ABEA-2A727C2CDF57 avatar
    1566 posts
    Member since:
    Apr 2022

    Posted 28 Jul 2010 Link to this post

    Hi Vadimko,

    Thank you for sharing your solution with the community. As a small token of gratitude for your involvement I have updated your Telerik points.

    Kind regards,
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.