Clientside validation in Advanced Template - how?

[Alex]

I am using a modal Advanced template with a resource that has mutiple values just like the demo - http://demos.telerik.com/aspnet-ajax/scheduler/examples/advancedformtemplate/defaultcs.aspx. 
Going with that example, I would like to be able to add a client side validation that ensures at least one User check box is selected.  If not, then alert a pop up to the user and cancel the save/update.  How can I accomplish this?

I looked at OnclientAppointmentInserting event, however it fired when the appointment window opens up and not when the save button is clicked...

Thanks.


Edit: I found this post - http://www.telerik.com/community/forums/aspnet-ajax/scheduler/need-client-side-fxn-called-by-save-close-and-cancel-button-on-appointment-edit-form.aspx and followed it (see below).  I put an alert in the handler and i see it get fired. However, the save proceeds as normal.  I.e. the window closes and the appointment gets saved.  What am I doing wrong?

var schedulerTemplates = {};

            function schedulerFormCreated(scheduler, eventArgs) {
                // Create a client-side object only for the advanced templates
                var mode = eventArgs.get_mode();
                if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                    mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {

                    // Initialize the client-side object for the advanced form
                    var formElement = eventArgs.get_formElement();
                    var templateKey = scheduler.get_id() + "_" + mode;
                    var advancedTemplate = schedulerTemplates[templateKey];
                    if (!advancedTemplate)
                    {
                        // Initialize the template for this RadScheduler instance
                        // and cache it in the schedulerTemplates dictionary
                        var schedulerElement = scheduler.get_element();
                        var isModal = scheduler.get_advancedFormSettings().modal;
                        advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                        advancedTemplate.initialize();

                        schedulerTemplates[templateKey] = advancedTemplate;

                        // Remove the template object from the dictionary on dispose.
                        scheduler.add_disposing(function() {
                            schedulerTemplates[templateKey] = null;
                        });
                    }

                    // Are we using Web Service data binding?
                    if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                        // Populate the form with the appointment data
                        var apt = eventArgs.get_appointment();
                        var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                        advancedTemplate.populate(apt, isInsert);
                    }

                    // Override the save button for validation check
                    var saveButton = $telerik.$("[id$='RadScheduler1_Form_AdvancedInsertForm1_UpdateButton']");
                    saveButton.click(validateAppointmentSave);
                }
            }


            function validateAppointmentSave(sender, eventArgs) {
//              var advancedEditForm = sender.get_AdvancedEditForm();
                //              advancedEditForm.close();
                var scheduler = $telerik.$("[id$='RadScheduler1']");
                scheduler.hideAdvancedForm();

                eventArgs.set_cancel(true);
            }

[Alex]

Got it resovled. I am using a listbox instead of a checkbox in the demo, but you get the idea.

var schedulerTemplates = {};

           function schedulerFormCreated(scheduler, eventArgs) {
               // Create a client-side object only for the advanced templates
               var mode = eventArgs.get_mode();
               if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                   mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {

                   // Initialize the client-side object for the advanced form
                   var formElement = eventArgs.get_formElement();
                   var templateKey = scheduler.get_id() + "_" + mode;
                   var advancedTemplate = schedulerTemplates[templateKey];
                   if (!advancedTemplate)
                   {
                       // Initialize the template for this RadScheduler instance
                       // and cache it in the schedulerTemplates dictionary
                       var schedulerElement = scheduler.get_element();
                       var isModal = scheduler.get_advancedFormSettings().modal;
                       advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement, isModal);
                       advancedTemplate.initialize();

                       schedulerTemplates[templateKey] = advancedTemplate;

                       // Remove the template object from the dictionary on dispose.
                       scheduler.add_disposing(function() {
                           schedulerTemplates[templateKey] = null;
                       });
                   }

                   // Are we using Web Service data binding?
                   if (!scheduler.get_webServiceSettings().get_isEmpty()) {
                       // Populate the form with the appointment data
                       var apt = eventArgs.get_appointment();
                       var isInsert = mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert;
                       advancedTemplate.populate(apt, isInsert);
                   }

                   // Override the save button for validation check
                   var saveButton = $telerik.$("[id$='RadScheduler1_Form_AdvancedInsertForm1_UpdateButton']");
                   var updateButton = $telerik.$("[id$='RadScheduler1_Form_AdvancedEditForm1_UpdateButton']");
                   saveButton.click(validateAppointmentSave);
                   updateButton.click(validateAppointmentUpdate);
               }
           }


           function validateAppointmentSave() {
               // Check to ensure at least one Employee resource is selected
               var employeeListBox = document.getElementById("RadScheduler1_Form_AdvancedInsertForm1_ResEmployee_ResourceValuesListBox");
               var IsEmployeeSelected = false;
               for (i = 0; i < employeeListBox.options.length; i++) {
                   if (employeeListBox.options[i].selected) {
                       IsEmployeeSelected = true;
                       break;
                   }
               }
               if (!IsEmployeeSelected) {
                   alert("Please select at least one employee.");
                   return false;
               }

               return true;
           }

           function validateAppointmentUpdate() {
               // Check to ensure at least one Employee resource is selected
               var employeeListBox = document.getElementById("RadScheduler1_Form_AdvancedEditForm1_ResEmployee_ResourceValuesListBox");
               var IsEmployeeSelected = false;
               for (i = 0; i < employeeListBox.options.length; i++) {
                   if (employeeListBox.options[i].selected) {
                       IsEmployeeSelected = true;
                       break;
                   }
               }
               if (!IsEmployeeSelected) {
                   alert("Please select at least one employee.");
                   return false;
               }

               return true;
           }