Can you make the selected item of a TimeView object scrollIntoView

[Justin Kohnen]

I have a RadTimePicker and I'm trying to get the SelectedDate to ScorllIntoView when the TimeView Popup is displayed.

Is this possible?

Here is a code snippet of what I'm working with:

<style type="text/css">
#<%= StartTime.ClientID %>_timeView_wrapper {
            overflow:auto;
            width:83px;
            height:200px;
        }
</style>

<telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker" Width="78px">
    <dateinput id="DateInput3" runat="server" emptymessagestyle-cssclass="riError"
    emptymessage=" " />
    <timepopupbutton visible="false" />
    <timeview id="TimeView1" runat="server" columns="1" showheader="false" starttime="00:00"
        endtime="23:59" interval="00:30" />
</telerik:RadTimePicker>

[Radoslav]

Hello Justin,

Unfortunately the RadTimePicker control does not support out of the box the desired functionality. However you could achieve it by writing some custom JavaScript code for maintaining the scroll position. With the following code snippet you could get the TimeView:

function OnPopupOpening(sender, eventArgs)
{
 var tameViewElement = eventArgs.get_popupControl().get_element();
}

Then with some custom javascript you could move the scroll position to the selected time cell. Please check out the following online resources which explains how to maintain scroll position:

http://www.redips.net/javascript/maintain-scroll-position/
http://www.4guysfromrolla.com/articles/111704-1.aspx
http://www.dotnetspider.com/forum/186434-maintain-vertical-scroll-position-after-page-refresh.aspx

Greetings,
Radoslav
the Telerik team

[Justin Kohnen]

Radoslav-

Thank you for your help.
I ran into a small snag implementing your suggestion. There seems to be a small delay between when OnPopupOpening is called and when the selected cell is set (when the ".rcSelected" class is applied).

However, setting short delay appears to overcome the issue.

Here is my solution using your suggestion combined with jQuery:

function InitializePopup(sender, eventArgs) {
    var htmlPopUp = eventArgs.get_popupControl().get_element();
    var jQueryPopUp = $(htmlPopUp);

    setTimeout(
    function() {
        var selectedTime = jQueryPopUp.find(".rcSelected");

        if (selectedTime.length > 0) {
            selectedTime.get(0).scrollIntoView(true);
        }
    }, 150);
}

Thanks again.

[Radoslav]

Hi Justin,

I am glad that you achieved the desired functionality. In case you experience any further problems, do not hesitate to contact us again.

Greetings,
Radoslav
the Telerik team