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

Add javascript behavior to advanced form

5 Answers 88 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Cedric
Top achievements
Rank 2
Cedric asked on 23 Jul 2010, 06:34 PM
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

5 Answers, 1 is accepted

Sort by
0
Veronica
Telerik team
answered on 29 Jul 2010, 12:56 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Cedric
Top achievements
Rank 2
answered on 29 Jul 2010, 05:02 PM
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
0
Accepted
Veronica
Telerik team
answered on 04 Aug 2010, 01:48 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Cedric
Top achievements
Rank 2
answered on 04 Aug 2010, 03:32 PM

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


0
Veronica
Telerik team
answered on 04 Aug 2010, 03:49 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Tags
Scheduler
Asked by
Cedric
Top achievements
Rank 2
Answers by
Veronica
Telerik team
Cedric
Top achievements
Rank 2
Share this question
or