This is a migrated thread and some comments may be shown as answers.

Setting StartTime and EndTime - Javascript issue

1 Answer 92 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Janice
Top achievements
Rank 1
Janice asked on 15 May 2014, 07:11 PM
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?

1 Answer, 1 is accepted

Sort by
0
Janice
Top achievements
Rank 1
answered on 16 May 2014, 06:30 PM
ok,

I think i figured it out.  I replaced this

var StartPicker = $find("<%= StartTime.ClientID %>");
var EndPicker = $find("<%= EndTime.ClientID %>");

with this

var $ = $telerik.$;
var StartPicker = $find($("[id$='_StartTime']").attr("id"));
var EndPicker = $find($("[id$='_EndTime']").attr("id"));



now i can get the timeview of the timepicker, and set the timeview...

hope this helps someone else....
Tags
Scheduler
Asked by
Janice
Top achievements
Rank 1
Answers by
Janice
Top achievements
Rank 1
Share this question
or