DatePicker not changing position when scrolling

[Martijn van Vuren]

When I use the datepicker inside a scrollable area (<div style='overfow:scroll'>) the datepicker-popup does not show (the second time) on the correct position when the div is scrolled. The first time the datepicker is openend is shows on the correct position, but after scrolling and reopenening the position is wrong.

I think this is because the animation-container is rendered outside of the scrollable area and the container is positioned absolute.

Is there a way for me to render the animation-container inside the div with the scrollbar? or is there a way to always recalculate the position on opening the datepicker (with multiple datepickers, switching between them does this; side effect that when opening the datepicker the popup could show up outside the scrollable area)?

Regards,

[Georgi Krustev]

Hello Martijn van Vuren,

The described behavior is expected, because of the absolute position of the animated container. Also animated container div is added to the end of the document.body.

In order to achieve your goal you can modify telerik.datapicker.js file like so:

        $calendar: function () {
            if (!sharedCalendar) {
                sharedCalendar = $($t.calendar.html(this.focusedDate, this.selectedDate, this.minDate, this.maxDate))
                                    .hide()
                                    .addClass('t-datepicker-calendar')
                                    .bind('click', function (e) { e.stopPropagation(); })
                                    .appendTo(scrollableDIV)
                                    .tCalendar({
                                        selectedDate: this.selectedDate,
                                        minDate: this.minDate,
                                        maxDate: this.maxDate
                                    });
                $(document).bind('mousedown', $t.datepicker.hideSharedCalendar);
            }
...

You need to replace 'scrollableDIV' with a real scrollable HTML DIV in order to append calendar to it. Thus I believe you will avoid any of the aforementioned problems.

Regards,
Georgi Krustev
the Telerik team

[Junie]

Hello,

I also have this problem. I tried the solution, although the calendar was able to position correctly when I try to scroll the "scrollable Div", the calendar is not positioned under the correct textbox.

Junie

[Hristo Germanov]

Hi Junie,

In order to test aforementioned problem, I have created a simple test project, which is attached this message. I was not able to find problem with the positioning of the calendar after scrolling.
I will ask you check it and let me know if I am missing something.

Greetings,

Hristo Germanov

the Telerik team

[Junie]

Hello,

Many thanks for the reply. Just some questions though.

1. When I try to use my scroll on my mouse the calendar stay still.
2. On your previous answer you mentioned  "You need to replace 'scrollableDIV' with a real scrollable HTML DIV in order to append calendar to it. Thus I believe you will avoid any of the aforementioned problems." and you highlighted that said part of code. But on your solution I still see that it is still unchanged

.appendTo(document.body)

maybe there is a part in there that you have changed instead?

3. In your attachment when I try to click the vertical scrollbar of the "scrollable div" the calendar hides, which is very nice, but on my project the calendar will not hide when I click my vertical scrollbar. How did you do that? Is there any codes or modifications that you have done?

4. Also can you please a send an un-minified version of the javascript? It's hard to compare if it is only one line of codes.

Many thanks,
Junie

[Georgi Krustev]

Hi Junie,

Straight onto your questions:

#1:
The calendar will stay open, because of its absolute positioning. This is by design and expected.

#2:
This was a suggested work-around, which was not 100% tested and in this case will not fix the problem. That's why we send a simple test project with the latest official version of our components and no changes were made to the javascript files. Nevertheless I have add uncompressed version of telerik.datepicker.js to the attached archive.

#3:
The calendar will close, because we have implemented functionality, which closes popup on document mousedown.

#4:
It is added to the attached archive.

In order to avoid the reported problem I will suggest you wire the scroll event of the scrollable div and hide popup once it is raised. The attached test project implements this suggestion.

Regards,
Georgi Krustev
the Telerik team

[Junie]

Hello,

Thanks again for the reply.
It seems this is the latest version of Telerik MVC. Version 2010.1.518 if I am not mistaken. Is this out already? Because I can only download version 2010.1 309.

Thanks again,
Junie

[Georgi Krustev]

Hello Junie,

This is a Service Pack 2 of the official release of Telerik Components for ASP.NET MVC (version 2010.1.518). It is available for download only for customers. Nevertheless if there is a major issue with the official version, we will attach the SP to some of the forum threads.

Regards,
Georgi Krustev
the Telerik team

[Junie]

Hello,

Thanks again for everything and for the reply. I hope that you will include this one on the next release.

More power to you.

Regards,
Junie