Client Events on Advanced Form with Web Service

[Tim]

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.

[Ivana]

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