AJAX version Scheduler / Ext edit in RadDock issue

[Peter]

Hi

I'm using the Radock example to create custom "form".
This example i'm using : 
http://demos.telerik.com/aspnet-ajax/scheduler/examples/raddock/defaultcs.aspx

Now,
This doen't use AJAXPanel, so i have tried to add this to the demo version.
Once i run it the first move /edit = ok , but the next request i get this error :

Runtime-error Microsoft JScript: Sys.WebForms.PageRequestManagerServerErrorException: Invalid JSON primitive: 

This is what i have changed /added in the demo :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Scheduler.RadDock.DefaultCS"

    MasterPageFile="~/MasterPage.master" %>

 

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

    <link rel="stylesheet" type="text/css" href="Styles.css" />

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

 

 

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

    </telerik:RadAjaxManager>

 

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">

        <script type="text/javascript">

 

            function openForm() {

                var dock = $find("<%= RadDock1.ClientID %>");

                // Center the RadDock on the screen

                var viewPort = $telerik.getViewPortSize();

                var xPos = Math.round((viewPort.width - parseInt(dock.get_width())) / 2);

                var yPos = Math.round((viewPort.height - parseInt(dock.get_height())) / 2);

                $telerik.setLocation(dock.get_element(), { x: xPos, y: yPos });

 

                dock.set_closed(false);

 

                var descriptionTextBox = $get('<%= DescriptionText.ClientID %>');

                descriptionTextBox.focus();

 

                Sys.Application.remove_load(openForm);

            }

 

            function hideForm() {

                var dock = $find("<%= RadDock1.ClientID %>");

                dock.set_closed(true);

 

                return true;

            }

        </script>

    </telerik:RadScriptBlock>

    <qsf:informationbox id="InformationBox1" runat="server" title="The example now supports scheduling of <strong>recurring</strong> appointments.">

    </qsf:informationbox>

 

----------> NEW <------------------

     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server"  Skin="Metro"></telerik:RadAjaxLoadingPanel>

     

    <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="RadAjaxLoadingPanel1">

----------> NEW <------------------

 

            <asp:Panel runat="server" ID="DockPanel">

                <telerik:RadDock runat="server" ID="RadDock1" Width="650px" Height="530px" Closed="true"

                    Style="z-index: 2000;" Title="Edit appointment" >

                    <Commands>

                        <telerik:DockCloseCommand></telerik:DockCloseCommand>

                    </Commands>

                    <ContentTemplate>

                        <div class="editForm">

                            <div class="header">

                                <asp:Label runat="server" ID="StatusLabel"></asp:Label>

                            </div>

                            <div class="content">

                                Description:<br />

                                <asp:TextBox runat="server" ID="DescriptionText" Width="240px"></asp:TextBox>

                                <asp:RequiredFieldValidator runat="server" ID="DescriptionTextRequiredFieldValidator"

                                    Display="Dynamic" ControlToValidate="DescriptionText" ErrorMessage="Description is required"></asp:RequiredFieldValidator>

                                <br />

                                <br />

                                Starts at:

                                <telerik:RadDateTimePicker ID="StartTime" runat="server" SharedCalendarID="SharedCalendar"

                                    SharedTimeViewID="SharedTimeView">

                                </telerik:RadDateTimePicker>

                                <asp:RequiredFieldValidator runat="server" ID="StartTimeRequiredFieldValidator" Display="Dynamic"

                                    ControlToValidate="StartTime" ErrorMessage="Start time is required"></asp:RequiredFieldValidator>

                                <br />

                                <br />

                                Ends at:

                                <telerik:RadDateTimePicker ID="EndTime" runat="server" SharedCalendarID="SharedCalendar"

                                    SharedTimeViewID="SharedTimeView">

                                </telerik:RadDateTimePicker>

                                <asp:RequiredFieldValidator runat="server" ID="EndTimeRequiredFieldValidator" Display="Dynamic"

                                    ControlToValidate="EndTime" ErrorMessage="End time is required"></asp:RequiredFieldValidator>

                                <br />

                                <br />

                                Assigned to:

                                <telerik:RadComboBox runat="server" ID="UserDropDown" DataSourceID="UsersDataSource"

                                    DataTextField="UserName" DataValueField="ID">

                                </telerik:RadComboBox>

                                <br />

                                <br />

                                <asp:Label runat="server" Text="Reminder" ID="lblReminders"></asp:Label>

                                <telerik:RadComboBox runat="server" ID="ReminderDropDown" Width="120px">

                                    <Items>

                                        <telerik:RadComboBoxItem Text="None" Value=""></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="0 minutes" Value="0"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="1 minute" Value="5"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="2 minutes" Value="10"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="3 minutes" Value="15"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="4 minutes" Value="30"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="1 hour" Value="60"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="2 hours" Value="120"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="3 hours" Value="180"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="4 hours" Value="240"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="5 hours" Value="300"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="6 hours" Value="360"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="7 hours" Value="420"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="8 hours" Value="480"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="9 hours" Value="540"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="10 hours" Value="600"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="11 hours" Value="660"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="12 hours" Value="720"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="18 hours" Value="1080"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="1 day" Value="1440"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="2 days" Value="2880"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="3 days" Value="4320"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="4 days" Value="5760"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="1 week" Value="10080"></telerik:RadComboBoxItem>

                                        <telerik:RadComboBoxItem Text="2 weeks" Value="20160"></telerik:RadComboBoxItem>

                                    </Items>

                                </telerik:RadComboBox>

                            </div>

                            <div class="footer">

                                <asp:Button runat="server" ID="SubmitButton" Text="Update" OnClick="SubmitButton_Click">

                                </asp:Button>

                                <button onclick="hideForm();" type="button" style="margin-right: 20px;">

                                    Cancel</button>

                            </div>

                            <telerik:RadTimeView ID="SharedTimeView" runat="server">

                            </telerik:RadTimeView>

                            <telerik:RadCalendar ID="SharedCalendar" runat="server" EnableMonthYearFastNavigation="False"

                                EnableMultiSelect="False" UseColumnHeadersAsSelectors="False" UseRowHeadersAsSelectors="False">

                            </telerik:RadCalendar>

                            <asp:HiddenField runat="server" ID="_originalRecurrenceRule"></asp:HiddenField>

                            <telerik:RadSchedulerRecurrenceEditor runat="server" ID="RadSchedulerRecurrenceEditor1">

                            </telerik:RadSchedulerRecurrenceEditor>

                        </div>

                    </ContentTemplate>

                </telerik:RadDock>

            </asp:Panel>

            <telerik:RadScheduler runat="server" ID="RadScheduler1" Width="750px" TimeZoneOffset="03:00:00"

                SelectedDate="2012-04-16" DayStartTime="08:00:00" DayEndTime="18:00:00" StartEditingInAdvancedForm="false"

                SelectedView="DayView" DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start"

                DataEndField="End" DataReminderField="Reminder" DataRecurrenceField="RecurrenceRule"

                DataRecurrenceParentKeyField="RecurrenceParentID" DataSourceID="AppointmentsDataSource"

                OnFormCreating="RadScheduler1_FormCreating" Reminders-Enabled="true" OverflowBehavior="Auto">

                <AdvancedForm Modal="true"></AdvancedForm>

                <ResourceTypes>

                    <telerik:ResourceType KeyField="ID" Name="Room" TextField="RoomName" ForeignKeyField="RoomID"

                        DataSourceID="RoomsDataSource"></telerik:ResourceType>

                    <telerik:ResourceType KeyField="ID" Name="User" TextField="UserName" ForeignKeyField="UserID"

                        DataSourceID="UsersDataSource"></telerik:ResourceType>

                </ResourceTypes>

                <TimeSlotContextMenuSettings EnableDefault="true"></TimeSlotContextMenuSettings>

                <AppointmentContextMenuSettings EnableDefault="true"></AppointmentContextMenuSettings>

            </telerik:RadScheduler>

 

 ----------> NEW <------------------

</telerik:RadAjaxPanel>

 ----------> NEW <------------------

 

    <sds:SessionDataSource ID="AppointmentsDataSource" runat="server" PrimaryKeyFields="ID"

        ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>" SelectCommand="SELECT * FROM [Appointments]"

        InsertCommand="INSERT INTO [Appointments] ([Subject], [Start], [End], [UserID], [RoomID], [RecurrenceRule], [RecurrenceParentID], [Annotations], [Description], [Reminder], [LastModified]) VALUES (@Subject, @Start, @End, @UserID, @RoomID, @RecurrenceRule, @RecurrenceParentID, @Annotations, @Description, @Reminder, @LastModified)"

        UpdateCommand="UPDATE [Appointments] SET [Subject] = @Subject, [Start] = @Start, [End] = @End, [UserID] = @UserID, [RoomID] = @RoomID, [RecurrenceRule] = @RecurrenceRule, [RecurrenceParentID] = @RecurrenceParentID, [Annotations] = @Annotations, [Description] = @Description, [Reminder] = @Reminder, [LastModified] = @LastModified WHERE [ID] = @ID"

        DeleteCommand="DELETE FROM [Appointments] WHERE [ID] = @ID" ClearSessionOnInitialLoad="True"

        SessionKey="System.Web.UI.Page_AppointmentsDataSource">

        <DeleteParameters>

            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>

        </DeleteParameters>

        <UpdateParameters>

            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>

            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>

            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>

            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>

            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="Annotations" Type="String"></asp:Parameter>

            <asp:Parameter Name="Description" Type="String"></asp:Parameter>

            <asp:Parameter Name="Reminder" Type="String"></asp:Parameter>

            <asp:Parameter Name="LastModified" Type="String"></asp:Parameter>

            <asp:Parameter Name="ID" Type="Int32"></asp:Parameter>

        </UpdateParameters>

        <InsertParameters>

            <asp:Parameter Name="Subject" Type="String"></asp:Parameter>

            <asp:Parameter Name="Start" Type="DateTime"></asp:Parameter>

            <asp:Parameter Name="End" Type="DateTime"></asp:Parameter>

            <asp:Parameter Name="UserID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="RoomID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="RecurrenceRule" Type="String"></asp:Parameter>

            <asp:Parameter Name="RecurrenceParentID" Type="Int32"></asp:Parameter>

            <asp:Parameter Name="Annotations" Type="String"></asp:Parameter>

            <asp:Parameter Name="Description" Type="String"></asp:Parameter>

            <asp:Parameter Name="Reminder" Type="String"></asp:Parameter>

            <asp:Parameter Name="LastModified" Type="String"></asp:Parameter>

        </InsertParameters>

    </sds:SessionDataSource>

    <sds:SessionDataSource ID="RoomsDataSource" runat="server" DisplayWarning="false"

        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"

        SelectCommand="SELECT * FROM [Rooms]">

    </sds:SessionDataSource>

    <sds:SessionDataSource ID="UsersDataSource" runat="server" DisplayWarning="false"

        ProviderName="System.Data.SqlClient" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"

        SelectCommand="SELECT * FROM [Users]">

    </sds:SessionDataSource>

</asp:Content>

Any suggestions howto get this working properly ?

Regards
Peter.

[Slav]

Hello Peter,

The encountered problem is a result of wrapping the RadDock in a RadAjaxPanel. As described in the help article Placing a RadDock in an UpdatePanel it is not recommended to put the dock control in an UpdatePanel or other controls that use it, for example RadAjaxPanel or RadAjaxManager.

If you want to add and edit appointments without refreshing the page, you can do so by Ajaxifying the RadScheduler and the content of the dock. The RadDock can be opened and closed via the set_closed method from its client-side API. For your convenience I have attached a sample project that demonstrates this solution. Please use it as a reference for implementing the desired functionality.

Greetings,
Slav
the Telerik team

[Peter]

Ok thanks for the example.

Because i've learned some Kendo UI stuff, i have used this Kendo Window for the appointment window..
Works very good now !