Custom Advanced Form Javascript and CSS not working

[Felipe Saldana]

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]

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]

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]

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]

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]

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]

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]

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]

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
[e-mail]