I am using the RadScheduler with the AdvancedForm.ascx and AdvancedForm.js files. I have customized the AdvancedForm to allow four different checkboxes as follows:
AM, PM, After Hours, All Day. Each Checkbox fires some javascript which is located in AdvancedForm.js. I am not very strong in AJAX javascript. No matter what i try i cannot expose the StartTime or EndTime Control to set its timeview and then call the set_Time function.
The problem lies with this statement.
var StartPicker = $find("<%= StartTime.ClientID %>"); In my function it always returns NULL for the $find command.
The Four functions are below:
function toggleAM(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(8, 30, 0, 0);
EndtimeView.setTime(12, 0, 0, 0);
}
function togglePM(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(13, 0, 0, 0);
EndtimeView.setTime(17, 0, 0, 0);
}
function toggleAH(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(17, 0, 0, 0);
EndtimeView.setTime(21, 0, 0, 0);
}
function toggleAllDay(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(8, 30, 0, 0);
EndtimeView.setTime(21, 0, 0, 0);
}
MY advancedForm.ascx is as follows.
Control Language="VB" AutoEventWireup="true" CodeFile="AdvancedForm.ascx.vb"
Inherits="RadSchedulerAdvancedFormAdvancedForm" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="scheduler" TagName="ResourceControl" Src="ResourceControl.ascx" %>
<link href="TelerikCSS/ComboBox.css" rel="stylesheet" type="text/css" />
*some code not included
<ul class="rsTimePickers">
<li class="rsTimePick">
<label for='<%= StartDate.ClientID %>_dateInput_text'>
<%= Owner.Localization.AdvancedFrom %>:</label><telerik:RadDatePicker runat="server" ID="StartDate" CssClass="rsAdvDatePicker"
SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
MinDate="1900-01-01"><DateInput ID="DateInput2" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
EmptyMessageStyle-CssClass="riError" EmptyMessage=" " EnableSingleInputRendering="false" /></telerik:RadDatePicker>
<telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker"
Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'><DateInput ID="DateInput3" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" "
EnableSingleInputRendering="false" /><TimeView ID="TimeView1" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
EndTime="21:00" Interval="00:30" /></telerik:RadTimePicker>
</li>
<li class="rsTimePick rsEndTimePick">
<label for='<%= EndDate.ClientID %>_dateInput_text'>
<%= Owner.Localization.AdvancedTo%>:</label>
<telerik:RadDatePicker runat="server" ID="EndDate" CssClass="rsAdvDatePicker"
SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
MinDate="1900-01-01"><DateInput ID="DateInput4" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
EmptyMessageStyle-CssClass="riError" EmptyMessage=" " EnableSingleInputRendering="false" /></telerik:RadDatePicker>
<telerik:RadTimePicker runat="server" ID="EndTime" CssClass="rsAdvTimePicker"
Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>' ErrorMessage="End Time must be after Start Time" ><DateInput ID="DateInput5" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" "
EnableSingleInputRendering="false" /><TimeView ID="TimeView2" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
EndTime="21:00" Interval="00:30" /></telerik:RadTimePicker>
</li>
<li class="rsAllDayWrapper">
<asp:CheckBox runat="server" ID="chkAM" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAM()" Text="Morning"/>
<asp:CheckBox runat="server" ID="chkPM" CssClass="rsAdvChkWrap" Checked="false" OnClick="togglePM()" Text="Afternoon" />
<asp:CheckBox runat="server" ID="chkAH" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAH()" Text="AfterHours"/>
<asp:CheckBox runat="server" ID="AllDayEvent" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAllDay()" Text="AllDay" />
</li>
</ul>
<div>
<asp:CompareValidator ID="crvEndTime" runat="server" ControlToCompare ="StartTime" ControlToValidate ="EndTime" Operator ="GreaterThanEqual" ErrorMessage ="End Time Must be Greater than Start Time" ForeColor="Red">
</asp:CompareValidator><br /><br /></div>
</asp:Panel>
*** some other code omitted
All I want to do is call some javascript that sets the Start time and End Time when a checkbox is clicked.
Any Help?
AM, PM, After Hours, All Day. Each Checkbox fires some javascript which is located in AdvancedForm.js. I am not very strong in AJAX javascript. No matter what i try i cannot expose the StartTime or EndTime Control to set its timeview and then call the set_Time function.
The problem lies with this statement.
var StartPicker = $find("<%= StartTime.ClientID %>"); In my function it always returns NULL for the $find command.
The Four functions are below:
function toggleAM(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(8, 30, 0, 0);
EndtimeView.setTime(12, 0, 0, 0);
}
function togglePM(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(13, 0, 0, 0);
EndtimeView.setTime(17, 0, 0, 0);
}
function toggleAH(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(17, 0, 0, 0);
EndtimeView.setTime(21, 0, 0, 0);
}
function toggleAllDay(sender, args) {
var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");
var StarttimeView = StartPicker.get_timeView();
var EndtimeView = endPicker.get_timeView();
StarttimeView.setTime(8, 30, 0, 0);
EndtimeView.setTime(21, 0, 0, 0);
}
MY advancedForm.ascx is as follows.
Control Language="VB" AutoEventWireup="true" CodeFile="AdvancedForm.ascx.vb"
Inherits="RadSchedulerAdvancedFormAdvancedForm" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="scheduler" TagName="ResourceControl" Src="ResourceControl.ascx" %>
<link href="TelerikCSS/ComboBox.css" rel="stylesheet" type="text/css" />
*some code not included
<ul class="rsTimePickers">
<li class="rsTimePick">
<label for='<%= StartDate.ClientID %>_dateInput_text'>
<%= Owner.Localization.AdvancedFrom %>:</label><telerik:RadDatePicker runat="server" ID="StartDate" CssClass="rsAdvDatePicker"
SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
MinDate="1900-01-01"><DateInput ID="DateInput2" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
EmptyMessageStyle-CssClass="riError" EmptyMessage=" " EnableSingleInputRendering="false" /></telerik:RadDatePicker>
<telerik:RadTimePicker runat="server" ID="StartTime" CssClass="rsAdvTimePicker"
Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'><DateInput ID="DateInput3" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" "
EnableSingleInputRendering="false" /><TimeView ID="TimeView1" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
EndTime="21:00" Interval="00:30" /></telerik:RadTimePicker>
</li>
<li class="rsTimePick rsEndTimePick">
<label for='<%= EndDate.ClientID %>_dateInput_text'>
<%= Owner.Localization.AdvancedTo%>:</label>
<telerik:RadDatePicker runat="server" ID="EndDate" CssClass="rsAdvDatePicker"
SharedCalendarID="SharedCalendar" Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>'
MinDate="1900-01-01"><DateInput ID="DateInput4" runat="server" DateFormat='<%# Owner.AdvancedForm.DateFormat %>'
EmptyMessageStyle-CssClass="riError" EmptyMessage=" " EnableSingleInputRendering="false" /></telerik:RadDatePicker>
<telerik:RadTimePicker runat="server" ID="EndTime" CssClass="rsAdvTimePicker"
Skin='<%# Owner.Skin %>' Culture='<%# Owner.Culture %>' ErrorMessage="End Time must be after Start Time" ><DateInput ID="DateInput5" runat="server" EmptyMessageStyle-CssClass="riError" EmptyMessage=" "
EnableSingleInputRendering="false" /><TimeView ID="TimeView2" runat="server" Columns="2" ShowHeader="false" StartTime="08:00"
EndTime="21:00" Interval="00:30" /></telerik:RadTimePicker>
</li>
<li class="rsAllDayWrapper">
<asp:CheckBox runat="server" ID="chkAM" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAM()" Text="Morning"/>
<asp:CheckBox runat="server" ID="chkPM" CssClass="rsAdvChkWrap" Checked="false" OnClick="togglePM()" Text="Afternoon" />
<asp:CheckBox runat="server" ID="chkAH" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAH()" Text="AfterHours"/>
<asp:CheckBox runat="server" ID="AllDayEvent" CssClass="rsAdvChkWrap" Checked="false" OnClick="toggleAllDay()" Text="AllDay" />
</li>
</ul>
<div>
<asp:CompareValidator ID="crvEndTime" runat="server" ControlToCompare ="StartTime" ControlToValidate ="EndTime" Operator ="GreaterThanEqual" ErrorMessage ="End Time Must be Greater than Start Time" ForeColor="Red">
</asp:CompareValidator><br /><br /></div>
</asp:Panel>
*** some other code omitted
All I want to do is call some javascript that sets the Start time and End Time when a checkbox is clicked.
Any Help?