Making the selected time of a RadTimePicker scroll to top.

I rely heavily on Telerik’s ASP.NET AJAX tools. Recently I had an issue with the RadTimePicker when we attempted to put it in a scrolling container. Once in the container could scroll we wanted the selected time to be the first item when the picker’s TimeView appeared.

Out of the box this behavior is not possible, so I had to find a solution. After a lot of research, and some help from Telerik, I would like to share my solution:

To allow for scrolling you have to apply the proper styles

   1: <style type="text/css">

   2:     #<%= StartTime.ClientID %>_timeView_wrapper {

   3:             overflow:auto;

   4:             width:83px;

   5:             height:200px;

   6:     }

   7: </style>

The RadTimePicker

   1: <telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker"

   2:     Width="78px">

   3:     <dateinput id="DateInput3" runat="server" emptymessagestyle-cssclass="riError" emptymessage=" " />

   4:     <timepopupbutton visible="false" />

   5:     <timeview id="TimeView1" runat="server" columns="1" showheader="false" starttime="00:00"

   6:         endtime="23:59" interval="00:30" />                                                        

   7:     <ClientEvents OnPopupOpening="InitializePopup" />

   8:     <ShowAnimation Duration="0" />

   9:     <HideAnimation Duration="0" />

  10: </telerik:RadTimePicker>

Lastly, I used a bit of JavaScript and jQuery to apply the “scroll to top” behavior.

   1: <script type="text/javascript">

   2:     function InitializePopup(sender, eventArgs) {

   3:         var htmlPopUp = eventArgs.get_popupControl().get_element();

   4:         var jQueryPopUp = $(htmlPopUp);

   5:  

   6:         setTimeout(

   7:         function() {

   8:             var selectedTime = jQueryPopUp.find(".rcSelected");

   9:  

  10:             if (selectedTime.length > 0) {                    

  11:                 selectedTime.get(0).scrollIntoView(true);

  12:             }

  13:         }, 150);

  14:     }        

  15: </script>

You’ll notice I set a delay on line 6. This is because the TimeView html object needs a bit of time to render before we preform the find. Without this delay, the find returns an empty collection, and the scroll will not work.

I hope this helps someone.

Cheers.