New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How to scroll into view a specific time slot on initial page load in RadScheduler

How to

Scroll into view a specific time slot on initial page load.

Description

This KB article shows how to scroll to the 8AM time slot on initial page load. The CssClass property of the 8AM time slot is set to "TimeSlotCssFor8AM" in the TimeSlotCreated event handler. Then, using javascript the table cell (td) element of the specific time slot is found by its ClassName and the scrollIntolView() method is called.

Scroll into view the 8am time slot

Solution

protected void RadScheduler1_TimeSlotCreated(object sender, Telerik.Web.UI.TimeSlotCreatedEventArgs e)  
{  
    if (e.TimeSlot.Start.Hour == 8)  
        e.TimeSlot.CssClass = "TimeSlotCssFor8AM";  
} 
<script type="text/javascript">       
function pageLoad()       
{       
    var scheduler = $find('<%= RadScheduler1.ClientID %>');       
    var scrolledIntoViewSlot = $telerik.getElementByClassName(scheduler.get_element(), "TimeSlotCssFor8AM", "td");       
    if(scrolledIntoViewSlot)     
      setTimeout(function(){ scrolledIntoViewSlot.scrollIntoView();}, 200);      
}     
In this article