Custom Advanced Form Javascript and CSS not working

9 posts, 0 answers
  1. Felipe Saldana
    Felipe Saldana avatar
    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

  2. Peter
    Admin
    Peter avatar
    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.
  3. Felipe Saldana
    Felipe Saldana avatar
    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(thisthis._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

  4. Peter
    Admin
    Peter avatar
    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.
  5. Felipe Saldana
    Felipe Saldana avatar
    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
  6. Peter
    Admin
    Peter avatar
    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.
  7. Felipe Saldana
    Felipe Saldana avatar
    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?



  8. Dimitar Milushev
    Admin
    Dimitar Milushev avatar
    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.
  9. Nitinkumar
    Nitinkumar avatar
    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

Back to Top