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> |
| |