Using jQuery to customize RadScheduler
by Iana Tsolova
Telerik RadControls' for ASP.NET AJAX rendering is quite jQuery friendly. This is because almost all important html elements are tagged by a css class and therefore can be easily accessed using jQuery. In this blog post I have collected various cases from our forums and ticketing system on using jQuery to customize RadScheduler. Special thanks to all customers or visitors who raised those questions.
Q: “I have a scheduler in timeline view showing six weeks of information. Is it possible to change the header row background for the first two weeks?”
A: The first step in finding a solution is to examine the rendered html using Firebug, IE Developer Tools, or any other similar tool. You will notice that the date headers are rendered in <th> tags of a table with a css class rsHorizontalHeaderTable:
| <table style="width: 100%; height: 25px" class="rsHorizontalHeaderTable" border="0" |
| cellspacing="0" cellpadding="0"> |
| <tbody> |
| <tr> |
| <th> |
| <span>7/14/2009</span> |
| </th> |
| <th> |
| <span>7/21/2009</span> |
| </th> |
| <th> |
| <span>7/28/2009</span> |
| </th> |
| <th> |
| <span>8/4/2009</span> |
| </th> |
| <th> |
| <span>8/11/2009</span> |
| </th> |
| <th> |
| <span>8/18/2009</span> |
| </th> |
| </tr> |
| </tbody> |
| </table> |
Therefore, we access the collection of <th> elements of a table with the specified class name with: $("table.rsHorizontalHeaderTable th"). Then we use the slice(0, i) method to take the first i elements starting with the first. Here is the complete code:
| <script type="text/javascript"> |
| window.$ = $telerik.$; |
| function pageLoad() |
| { |
| var scheduler = $find('<%=RadScheduler1.ClientID %>'); |
| if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView) |
| { |
| //2 weeks out of 6 weeks view is one third of header cells, hence: |
| var i = this.$("table.rsHorizontalHeaderTable th").length / 3; |
| $("table.rsHorizontalHeaderTable th").slice(0, i).css("background", "orange"); |
| } |
| } |
| </script> |
Q: “By default, clicking on a date number in Month view switches to Day view of the clicked date. How can I disable this functionality?”
A: We find all elements that have the rsDateHeader css class and disable their click and doubleclick events.
| <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> |
| <script type="text/javascript"> |
| window.$ = $telerik.$; |
| function pageLoad() { |
| var scheduler = $find("<%= RadScheduler1.ClientID %>"); |
| if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.MonthView) { |
| $(".rsDateHeader").each(function() { |
| $(this).click(doNothing).dblclick(doNothing); |
| }); |
| } |
| } |
| function doNothing(e) { |
| if (!e) e = window.event; |
| e.cancelBubble = true; |
| if (e.stopPropagation) { |
| e.stopPropagation(); |
| } |
| } |
| </script> |
| </telerik:RadScriptBlock> |
Q: "How can i scroll to the first appointment in a dayview. The dayview allways beginns at the first position. I want to scroll to automatically to the first appointment."
A: The following code finds the first appointment and calls the scrollIntoView() method:
| <script type="text/javascript"> |
| function pageLoad(){ |
| $ = $telerik.$; |
| var scheduler = $find("<%= RadScheduler1.ClientID %>"); |
| var firstApp = $(".rsApt")[0]; |
| if (firstApp) |
| firstApp.scrollIntoView(); |
| } |
| </script> |
Iana Tsolova
Iana Tsolova is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.