Client Events on Advanced Form with Web Service

2 posts, 0 answers
  1. Tim
    Tim avatar
    39 posts
    Member since:
    Oct 2010

    Posted 29 Nov 2011 Link to this post

    I'm trying to set the End Date when the Start Date is changed on a custom Advanced Form using a Web Service. I've used the following code on an advanced form with a linq data source and it works fine. 
    <telerik:RadDatePicker runat="server" ID="StartDate" Width="100px" MinDate="1960-01-01">
        <ClientEvents OnDateSelected="StartDateSelected" />
        <Calendar ID="Calendar1" RangeMinDate="1960-01-01" runat="server"/>
    </telerik:RadDatePicker>                           
     
    <telerik:RadDatePicker runat="server" ID="EndDate" Width="100px" MinDate="1960-01-01">
        <Calendar ID="Calendar2" RangeMinDate="1960-01-01" runat="server" />
    </telerik:RadDatePicker>                           

    Javascript Function:

    function StartDateSelected(sender, eventArgs) {
        var $ = $telerik.$;
        var endDatejQueryObject = $("[id$='Form_EndDate']");
        var endDatePicker = $find(endDatejQueryObject.attr("id"));
        var newDate = new Date(eventArgs.get_newValue());
        endDatePicker.set_selectedDate(newDate);
    }

    Using the Chrome debugger, I can see the event triggered when I change the start date. The endDatePicker is found ok and it looks like the end date is set ok via set_selectedDate(newDate), but the end data input box never changes. 

    I've tried putting a button on the form and setting the date with an onclick event, it doesn't work. I can set the value of an input control and an asp:textbox, but if I try to set the value on a RadTextBox it doesn't work. I can't seem to set any "Rad" controls via javascript on the advanced form.

    Any help is appreciated, thanks.
  2. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 05 Dec 2011 Link to this post

    Hi Tim,

    The date inputs in the Adavced Insert / Edit Form of the RadScheduler are rendered with the following IDs:
    [RadScheduler_ID]_AdvancedInsertForm_EndDate_dateInput
    [RadScheduler_ID]_AdvancedEditForm_EndDate_dateInput

    Therefore, the JS code in OnDateSelected event-handlers should look like in the following code-block:
    function StartDateSelected_InsertForm(sender, eventArgs)
    {
        var $ = $telerik.$;
        var endDatejQueryObject = $("[id$='AdvancedInsertForm_EndDate_dateInput']");
        var endDatePicker = $find(endDatejQueryObject.attr("id"));
        var newDate = new Date(eventArgs.get_newValue());
        endDatePicker.set_selectedDate(newDate);
    }
    function StartDateSelected_EditForm(sender, eventArgs)
    {
        var $ = $telerik.$;
        var endDatejQueryObject = $("[id$='AdvancedEditForm_EndDate_dateInput']");
        var endDatePicker = $find(endDatejQueryObject.attr("id"));
        var newDate = new Date(eventArgs.get_newValue());
        endDatePicker.set_selectedDate(newDate);
    }
    <AdvancedInsertTemplate>
        <div>
            <telerik:RadDatePicker runat="server" ID="StartDate" Width="100px" MinDate="1960-01-01">
                <ClientEvents OnDateSelected="StartDateSelected_InsertForm" />
                <Calendar ID="Calendar1" RangeMinDate="1960-01-01" runat="server" />
            </telerik:RadDatePicker>
            <telerik:RadDatePicker runat="server" ID="EndDate" Width="100px" MinDate="1960-01-01">
                <Calendar ID="Calendar2" RangeMinDate="1960-01-01" runat="server" />
            </telerik:RadDatePicker>
        </div>
    </AdvancedInsertTemplate>
    <AdvancedEditTemplate>
        <div>
            <telerik:RadDatePicker runat="server" ID="StartDate" Width="100px" MinDate="1960-01-01">
                <ClientEvents OnDateSelected="StartDateSelected_EditForm" />
                <Calendar ID="Calendar1" RangeMinDate="1960-01-01" runat="server" />
            </telerik:RadDatePicker>
            <telerik:RadDatePicker runat="server" ID="EndDate" Width="100px" MinDate="1960-01-01">
                <Calendar ID="Calendar2" RangeMinDate="1960-01-01" runat="server" />
            </telerik:RadDatePicker>
        </div>
    </AdvancedEditTemplate>

    I hope this helps.

    Regards,
    Ivana
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top