Add javascript behavior to advanced form

[Cedric]

Hi,

I have a scheduler bind to a web service everything is working fine, except that i'd like to add 2 features to the advanced form, by javascript, without using a custom template.

I'd like to add an event on the StartDate datepicker that changed automatically the end date with the same date.


I'd also like to check the AllDay checkbox by default.

I have done some test and nothing works, so maybe someone can help me...


To check the AllDay checkbox, I did in the OnClientFormCreated:

$telerik.$(".rsAllDayWrapper .rsAdvChkWrap input[type=checkbox]:first").click();

Result: Checkbox never checked...

To add an event on the startdate datepicker I did

function OnClientFormCreated(sender, eventArgs) {
var startDateHtml = $telerik.$(".rsTimePickers .rsAdvDatePicker input[id$='StartDate']:first");

var startDateId = startDateHtml.attr('id');

var startDate = $find(startDateId);

startDate.get_dateInput().add_valueChanged(Test);
}

function Test(sender, arg) {

    alert('changed'); 

}

Result => When I either change the date directly in the text field or i use the picker, no event triggered

Thanks in advanced for your help

[Veronica]

Hi Cedric,

To be able tho check the "All Day" checkbox via jQuery you can subscribe to the OnClientFormCreated event as you did and use the following code in the handler:

function formCreated(sender, args) {
            var $ = $telerik.$;
            $('input[name=RadScheduler1$Form$AllDayEvent]').attr('checked', true);
        }

To be able to check when the date of the "Start Date" DatePicker is changed do the following:

Subscribe to the OnFormCreated server-side event and find the datePicker. After that subscribe to the OnDateSelected event:

protected void RadScheduler1_FormCreated(object sender, SchedulerFormCreatedEventArgs e)
    {
        RadDatePicker startDate = e.Container.FindControl("StartDate") as RadDatePicker;
        if (startDate != null)
        {
            // advanced form is shown
            startDate.ClientEvents.OnDateSelected = "onDateSelected";
        }
    }

Write an alert in the onDateSelected client-side function:

function onDateSelected(sender, args) {
                alert("Date is changed!");
            }

Find the full code in the attached .zip file.

Hope this helps.

Best wishes,
Veronica Milcheva
the Telerik team

[Cedric]

Thanks for your answer but my RadScheduler is bound to a WebService, so the OnFormCreated event (Server side) is never triggered, that's why I tried to register to the onchange on the StartDate in the OnClientFormCreated event.

Do you have a workaround for this?

Thanks

[Veronica]

Hi Cedric,

Oops, it's my mistake. I missed that you are binding to a Web Service.

Here's the solution:

<script type="text/javascript">
           function formCreated(sender, args) {
               var $ = $telerik.$;
               $('input[name=RadScheduler1$Form$AllDayEvent]').attr('checked', true);
               var datePicker = $find(sender.get_id() + "_Form_StartDate_dateInput");
               datePicker.add_valueChanged(onDateSelectedHandler);
           }
           function onDateSelectedHandler(sender, args) {
               alert("Date is changed!");
           }
       </script>

Find the full code in the attached .zip file.

Please accept my appologies for the misunderstanding. 

Best Regards,
Veronica Milcheva
the Telerik team

[Cedric]

It worked, thanks a lot.

To make it works, I had to changed the folowing line 

var datePicker = $find(sender.get_id() + "_Form_StartDate_dateInput");

for

var datePicker = $find(sender.get_id() + "_AdvancedInsertForm_StartDate_dateInput");
or
var datePicker = $find(sender.get_id() + "_AdvancedEditForm_StartDate_dateInput");

depending if it was in edit or insert mode.

Thanks for your help

[Veronica]

Hello Cedric,

Great!

I'm glad I was able to help.

Please let me know if you have further questions.

Best wishes,
Veronica Milcheva
the Telerik team