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

Can you make the selected item of a TimeView object scrollIntoView

3 Answers 31 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Justin Kohnen
Top achievements
Rank 1
Justin Kohnen asked on 27 Jun 2011, 09:21 PM
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>

3 Answers, 1 is accepted

Sort by
0
Radoslav
Telerik team
answered on 01 Jul 2011, 08:57 AM
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

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.

0
Justin Kohnen
Top achievements
Rank 1
answered on 06 Jul 2011, 03:45 PM
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.
0
Radoslav
Telerik team
answered on 11 Jul 2011, 11:50 AM
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

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Tags
Calendar
Asked by
Justin Kohnen
Top achievements
Rank 1
Answers by
Radoslav
Telerik team
Justin Kohnen
Top achievements
Rank 1
Share this question
or