Setting StartTime and EndTime - Javascript issue

2 posts, 0 answers
  1. Janice
    Janice avatar
    9 posts
    Member since:
    Sep 2013

    Posted 15 May 2014 Link to this post

    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?
  2. Janice
    Janice avatar
    9 posts
    Member since:
    Sep 2013

    Posted 16 May 2014 in reply to Janice Link to this post

    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....
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top