AJAX version Scheduler / Ext edit in RadDock issue

3 posts, 0 answers
  1. Peter
    Peter avatar
    5 posts
    Member since:
    Nov 2012

    Posted 29 Dec 2012 Link to this post

    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.



  2. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 03 Jan 2013 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. Peter
    Peter avatar
    5 posts
    Member since:
    Nov 2012

    Posted 09 Feb 2013 Link to this post

    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 !
Back to Top