[Solved] Client side script not working in advanced template

[Shawn Smiley]

I've build a custom advanced edit/insert template based on the example advanced template (http://demos.telerik.com/aspnet-ajax/scheduler/examples/advancedformtemplate/defaultcs.aspx).  My changes are basically just removing the resources and adding some custom attribute fields.  Other than that, it's the original code from the example.

Everything is working great except that none of the client side javascript appears to work.  The specific instances that are not working are:
--Calendar and Time pickers do not display when you click on the date or time fields
--The recurrence panel does not display when you check the recurrence checkbox.

There is probably some little thing I'm missing in my setup.  :-)

Here are some code snippets:

In the master page:

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" OutputCompression="Disabled" ScriptMode="Debug">
      <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js">
        </asp:ScriptReference>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js">
        </asp:ScriptReference>
      </Scripts>
    </telerik:RadScriptManager>
  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
  </telerik:RadAjaxManager>
  <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" InitialDelayTime="200"
    MinDisplayTime="500" Skin="Default" Transparency="50">
  </telerik:RadAjaxLoadingPanel>

In my schedule.aspx page:

  <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
    <AjaxSettings>
      <telerik:AjaxSetting AjaxControlID="RadScheduler1">
        <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadScheduler1" />
        </UpdatedControls>
      </telerik:AjaxSetting>
    </AjaxSettings>
  </telerik:RadAjaxManagerProxy>

  <telerik:RadScheduler ID="RadScheduler1" runat="server" ProviderName="GmriAppointmentProvider"
    EnableDescriptionField="True" EnableRecurrenceSupport="False" CustomAttributeNames="Style, BusStatus, VisitStatus, ItemType"
    SelectedView="MonthView" Width="700px" StartInsertingInAdvancedForm="True"
     OverflowBehavior="Expand" Skin="WebBlue" EnableCustomAttributeEditing="True"
     OnAppointmentDataBound="RadScheduler1_AppointmentDataBound"
     OnAppointmentUpdate="RadScheduler1_AppointmentUpdate"
     OnAppointmentCommand="RadScheduler1_AppointmentCommand"
     OnDataBinding="RadScheduler1_DataBinding"
     OnDataBound="RadScheduler1_DataBound" >
    <AdvancedEditTemplate>
      <Gmri:SchedulerGenericEditTemplate runat="server" ID="GenericEditForm" Mode="Edit"
            Subject='<%# Bind("Subject") %>'
            Description='<%# Bind("Description") %>'
            Start='<%# Bind("Start") %>'
            End='<%# Bind("End") %>'
        Style='<%# Bind("Style") %>'
        BusStatus='<%# Bind("BusStatus") %>'
        VisitStatus='<%# Bind("VisitStatus") %>'
        ItemType='<%# Bind("ItemType") %>'
    />
    </AdvancedEditTemplate>
    <AdvancedInsertTemplate>
      <Gmri:SchedulerGenericEditTemplate runat="server" ID="GenericInsertForm" Mode="Insert"
            Subject='<%# Bind("Subject") %>'
            Description='<%# Bind("Description") %>'
            Start='<%# Bind("Start") %>'
            End='<%# Bind("End") %>'
        Style='<%# Bind("Style") %>'
        BusStatus='<%# Bind("BusStatus") %>'
        VisitStatus='<%# Bind("VisitStatus") %>'
        ItemType='<%# Bind("ItemType") %>'
      />
    </AdvancedInsertTemplate>
    <AdvancedForm EnableCustomAttributeEditing="True" />
  </telerik:RadScheduler>

And finally, in my AdvancedForm.ascx

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
  <Scripts>
    <asp:ScriptReference Path="~/includes/js/AdvancedForm.js" />
  </Scripts>
</asp:ScriptManagerProxy>

I also added the inline script in the example to the end of the AdvancedForm.js file.

I originally tried having the inline script and the reference to AdvancedForm.js directly in the file schedule.aspx but changed the implementation to that listed above based on using the ScriptManager after reading about scripts not running in update panels.


I'm hoping another set of eyes looking over things will spot something that I missed. :-)

[Peter]

Hi Shawn,

You need to handle OnClientFormCreated for RadScheduler - set
OnClientFormCreated="schedulerFormCreated" and use the following java script:

<script type="text/javascript">
       //<![CDATA[
           // Dictionary containing the advanced template client object
        // for a given RadScheduler instance (the control ID is used as key).
        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;
        var editSeries = eventArgs.get_editingRecurringSeries();
        advancedTemplate.populate(apt, isInsert, editSeries);
        }
        }
        }

       //]]>
       </script>

Greetings,
Peter
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.