Custom Advanced Form Javascript and CSS not working in UI for ASP.NET AJAX Scheduler

Felipe Saldana

62 posts

Member since:
Jan 2009

Posted 11 May 2009 Link to this post

I have implemented a solution utilizing the Advanced Templates Example

Update/Insert/Delete are working fine but the CSS and Javascript are not working.

For example if I leave the "Description" field blank the required field validator does not display its error message (it does not post back either). Also, If I click the "All Day" checkbox the time slots do not disappear...nothing happens.

I have added the AdvancedForm.js file and verified it gets loaded. I put an alert("test"); message in the file and the message displays correctly.

The only thing I can think of is that I have the Scheduler in a user control that resides on an .aspx that is contained in a master page.

Any help is greatly appreciated.

Thanks,

Felipe

Peter

Admin

6637 posts

Posted 12 May 2009 Link to this post

Hi Felipe,

A common pitfall in this implementation is that people sometimes forget to handle the OnClientFormCreated event. Please, make sure that this is not the case:
aspx:

    
            <script type="text/javascript">   
        
            //<![CDATA[  
        
            function schedulerFormCreated(scheduler, eventArgs)  
        
            {  
        
            var $ = $telerik.$;  
        
            var schedulerElement = scheduler.get_element();  
        
            var formElement = $("div.rsAdvancedEdit", schedulerElement);  
        
            if (formElement.length == 1)  
        
            {  
        
            // Initialize the client-side object for the advanced form  
        
            var advancedTemplate = new window.SchedulerAdvancedTemplate(schedulerElement, formElement);  
        
            advancedTemplate.initialize();  
        
            }  
        
            }  
        
            //]]>   
        
            </script>   
        
            <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" SelectedDate="2007-03-30"   
        
            DayStartTime="08:00:00" DayEndTime="18:00:00" TimeZoneOffset="03:00:00" CustomAttributeNames="Description"   
        
            OnDataBound="RadScheduler1_DataBound" OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"   
        
            OnClientFormCreated="schedulerFormCreated">

Greetings,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Felipe Saldana

62 posts

Member since:
Jan 2009

Posted 12 May 2009 Link to this post

That was a step in the right direction. I never did wire up the OnClientFormCreatedEvent.

Now I am getting a javascript script error in the AdvancedForm.js file.

In the following:

    
                _initializePickers: function()  
        
                {  
        
                    // Show picker pop-ups when the inputs are focused  
        
                    var showPopupDelegate = Function.createDelegate(this, this._showPopup);  
        
                    var templateId = this._templateId;  
        
                    this._pickers =  
        
                    {  
        
                        "startDate": $find(templateId + "_StartDate"),  
        
                        "endDate": $find(templateId + "_EndDate"),  
        
                        "rangeEndDate": $find(templateId + "_RangeEndDate"),  
        
                        "startTime": $find(templateId + "_StartTime"),  
        
                        "endTime": $find(templateId + "_EndTime")  
        
                    };  
        
                    $.each(  
        
                        this._pickers,  
        
                        function()  
        
                        {  
        
                            if (this && this.get_dateInput)  
        
                                this.get_dateInput().add_focus(showPopupDelegate);  
        
                        });  
        
                    var pickerControls = [  
        
                                $get(this._pickers.startDate.get_element().id + "_wrapper"),  
        
                                $get(this._pickers.startTime.get_element().id + "_wrapper"),  
        
                                $get(this._pickers.startTime.get_element().id + "_timeView_wrapper"),  
        
                                $get(this._pickers.endDate.get_element().id + "_wrapper"),  
        
                                $get(this._pickers.endTime.get_element().id + "_wrapper"),  
        
                                $get(this._pickers.endTime.get_element().id + "_timeView_wrapper"),  
        
                                $get(this._templateId + "_SharedCalendar")  
        
                            ];

$get(this._pickers.startDate.get_element().id + "_wrapper"), throws an error b/c this._pickers.startDate is null

I put a break point in this file at "startDate": $find(templateId + "_StartDate"), and verified that the $find method does return null.

Somehow the templateId is wrong but I am not sure how.

Any clues?

Like I said the Scheduler is in a user control on an .aspx page that is on a master page.

Thanks,

Felipe

Peter

Admin

6637 posts

Posted 14 May 2009 Link to this post

Hello Felipe,

Please, make sure that you match the Telerik assembly version with the version of the user controls . If you use for example the Q1 2009 assembly with the user controls from Q3 2008 - you will experience problems. Here is a working sample for reference:
http://www.telerik.com/support/kb/aspnet-ajax/scheduler/sample-project-of-the-customizing-the-advanced-template-example.aspx

Best wishes,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Felipe Saldana

62 posts

Member since:
Jan 2009

Posted 14 May 2009 Link to this post

I upgraded the version of the controls and its is working correctly now.

One more question....I want to have a custom radconfirm dialog appear when a user clicks on the 'Save' button when they edit an existing appointment.

In AdvancedEditForm.ascx I added some javascript to the OnClientClick event of the 'Update' button but it does not fire.

The test button I added didnt work either....the javascript would not fire.

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeFile="AdvancedEditForm.ascx.cs" Inherits="SchedulerTemplatesCS.AdvancedEditForm" %> 
        
            <%@ Register TagPrefix="scheduler" TagName="AdvancedForm" Src="AdvancedForm.ascx" %> 
        
            <%--  
        
                This is the advanced edit template. It defines the basic structure of the template and  
        
                hosts the AdvancedForm, which contains the actual input controls for description,  
        
                start time, end time, recurrence parameters, attributes and resources.  
        
                In order to be used as an edit template, this control contains the update and cancel buttons.  
        
            --%> 
        
            <div class="rsAdvancedEdit">  
        
                <scheduler:AdvancedForm runat="server" ID="AdvancedForm1" 
        
                                        Start='<%# Bind("Start") %>' 
        
                                        End='<%# Bind("End") %>' 
        
                                        RecurrenceRuleText='<%# Bind("RecurrenceRule") %>' 
        
                                        Description='<%# Bind("Subject") %>' /> 
        
                <asp:Panel runat="server" ID="ButtonsPanel" CssClass="rsAdvancedSubmitArea">  
        
                    <div class="rsAdvButtonWrapper">  
        
                        <asp:LinkButton  
        
                            runat="server" ID="UpdateButton" 
        
                            CssClass="rsAdvEditSave" 
        
                            CommandName="Update" OnClientClick="alert(123);">  
        
                            <span><%= Owner.Localization.Save %> </span> 
        
                        </asp:LinkButton> 
        
                        <asp:LinkButton ID="btn" runat="server" Text="test" OnClientClick="return alert(4477);"></asp:LinkButton> 
        
                        <asp:LinkButton  
        
                            runat="server" ID="CancelButton" 
        
                            CssClass="rsAdvEditCancel" 
        
                            CommandName="Cancel" 
        
                            CausesValidation="false">  
        
                            <span><%= Owner.Localization.Cancel %></span>  
        
                        </asp:LinkButton> 
        
                    </div> 
        
                </asp:Panel> 
        
            </div>

Any ideas?

Thanks,

Felipe

Peter

Admin

6637 posts

Posted 16 May 2009 Link to this post

Hi Felipe,

You can use RadToolbar button for the "Save" button of the advanced form and apply the approach from this kb article:
http://www.telerik.com/support/kb/aspnet-ajax/window/using-radprompt-and-radconfirm-with-telerik-navigational-controls.aspx

Best wishes,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Felipe Saldana

62 posts

Member since:
Jan 2009

Posted 18 May 2009 Link to this post

I have added that to my page and the radconfirm displays correctly.

But how do I tie that radconfirm in and make sure the events OnAppointmentInsert and OnAppointmentUpdate get fired correctly after the confirmation?

Dimitar Milushev

Admin

555 posts

Posted 19 May 2009 Link to this post

Hello Felipe Saldana,

You will need to cancel the client-side insert / update event so the Scheduler does not postback immediately, cache the appointment returned by args.get_appointment() and then, after the user confirms, in the confirmCallback call the .insertAppointment(apt) or .updateAppointment(apt) method of RadScheduler passing the cached appointment as a parameter. This will cause the Scheduler to postback and the OnAppointmentInsert / OnAppointmentUpdate events will be properly fired on the server.

Kind regards,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Nitinkumar

2 posts

Member since:
May 2013

Posted 07 May 2013 Link to this post

Hi Felipe,

I have followed you steps and I am able to do that . Its working awesome. Thank you .

Will looking for more issue fix from you ..

Nitinkumar Kakulde
Nitinkumar.kakulde@gmail.com