Can you make the selected item of a TimeView object scrollIntoView

4 posts, 0 answers
  1. Justin Kohnen
    Justin Kohnen avatar
    4 posts
    Member since:
    Jun 2008

    Posted 27 Jun 2011 Link to this post

    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>
  2. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 01 Jul 2011 Link to this post

    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.

  3. Justin Kohnen
    Justin Kohnen avatar
    4 posts
    Member since:
    Jun 2008

    Posted 06 Jul 2011 Link to this post

    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.
  4. Radoslav
    Admin
    Radoslav avatar
    1566 posts

    Posted 11 Jul 2011 Link to this post

    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!

Back to Top