Problems using "Creating Appointments with Drag-and-drop" example

[Egbert]

Hi,

I'm trying to implement your "Creating Appointments with Drag-and-drop" example (see code below), but I'm having the following problems:

1. At the beginning the program crashes because 

DataKeyField, DataSubjectField, DataStartField and DataEndField are required for databinding

I've added the following properties to the RadScheduler:
DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"

2. I can add items from the tree view to the scheduler, but when moving these items to another time or dragging them to change the duration, items will return to the original position.

3. When using the advanced form to insert an appointment, program is crashing with the following JavaScript runtime error:
JavaScript runtime error: Unable to get property 'findItemByText' of undefined or null reference

Hopefully someone can help me with this.....

Thanks,
Egbert

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Test.aspx.cs" Inherits="Test" %>

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

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
 <style type="text/css">
        .divRadios
        {
            margin-bottom: 15px;
        }
        .background
        {
            background: url("arrows.png") no-repeat scroll 0 0 transparent;
            padding: 115px 0 0 0px;
            margin-left: 45px;
        }

        #RadTreeView1
        {
            margin-bottom: 15px;
        }
        .divTree
        {
            float: left;
            width: 315px;

        }
        .schedulerPositioning
        {
            width: 960px;
            float: left;
            display: block;
        }
    </style></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" EnableAJAX="true">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadScheduler1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1">
                    </telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxLoadingPanel>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
                //<![CDATA[
            //Shows whether an Appointment is inserted directly, or the
            //the Advanced Insert Form is opened when TreeView node is dropped on the Scheduler.
            var directlyInsertAppointment = true;

            function pageLoad() {
                $telerik.$('#<%=RadioButtonListChooseInsert.ClientID %>').click(radioButtonListChooseInsert_click);
            }

            function radioButtonListChooseInsert_click(radioButtonList) {
                //Gets the currently selected item of the RadioButtonList.
                var selectedItemValue = $telerik.$('#<%=RadioButtonListChooseInsert.ClientID %> input[type=radio]:checked').val();

                if (selectedItemValue == "DirectInsert") {
                    directlyInsertAppointment = true;
                } else {
                    directlyInsertAppointment = false;
                }
            }

            function nodeDropping(sender, eventArgs) {
                var htmlElement = eventArgs.get_htmlElement();
                var scheduler = $find('<%= RadScheduler1.ClientID %>');

                if (isPartOfSchedulerAppointmentArea(htmlElement)) {
                    //Gets the TimeSlot where an Appointment is dropped.
                    var timeSlot = scheduler.get_activeModel().getTimeSlotFromDomElement(htmlElement);
                    var startTime = timeSlot.get_startTime();
                    var endTime = new Date(startTime);

                    //Gets all the data needed for the an Appointment, from the TreeView node.
                    var node = eventArgs.get_sourceNode();
                    var text = node.get_text();
                    var attributes = node.get_attributes();
                    var duration = attributes.getAttribute("Duration");
                    endTime.setMinutes(endTime.getMinutes() + parseInt(duration));
                    var speaker = attributes.getAttribute("Speaker");
                    var parentValue = node.get_parent().get_value();
                    var category = scheduler.get_resources().getResourceByTypeAndKey("Category", parentValue);

                    //New appointment is created. The start/end time, subject and category are set.
                    var newAppointment = new Telerik.Web.UI.SchedulerAppointment();
                    newAppointment.set_start(startTime);
                    newAppointment.set_end(endTime);
                    newAppointment.set_subject(text + " (by " + speaker + ")");
                    if (category != null) {
                        newAppointment.get_resources().add(category);
                    }

                    //Checks for the user's choice of the method for inserting Appointments.
                    if (directlyInsertAppointment) {
                        scheduler.insertAppointment(newAppointment);
                    } else {
                        //If Advanced Form is opened, the information from the TreeVew node is stored in a hidden input.
                        var appointmentInfo = { subject: text, duration: duration, speaker: speaker, category: category };
                        var appointmentInfoSerialized = Sys.Serialization.JavaScriptSerializer.serialize(appointmentInfo);
                        $get("<%=HiddenInputAppointmentInfo.ClientID%>").value = appointmentInfoSerialized;
                        scheduler.showInsertFormAt(timeSlot);
                    }
                }
                else {
                    //The node was dropped elsewhere on the document.
                    eventArgs.set_cancel(true);
                }
            }

            function isPartOfSchedulerAppointmentArea(htmlElement) {
                // Determines if an HTML element is part of the scheduler appointment area.
                // This can be either the rsContent or the rsAllDay div (in day and week view).
                return $telerik.$(htmlElement).parents().is("div.rsAllDay") ||
                            $telerik.$(htmlElement).parents().is("div.rsContent")
            }

            function formCreated(scheduler, args) {
                var mode = args.get_mode();
                if (mode == Telerik.Web.UI.SchedulerFormMode.AdvancedInsert ||
                         mode == Telerik.Web.UI.SchedulerFormMode.AdvancedEdit) {
                    //Gets the value from the hidden input, and populates the Appointment's data from it.
                    if ($get("<%=HiddenInputAppointmentInfo.ClientID%>").value != "") {
                        var hiddenInputValue = Sys.Serialization.JavaScriptSerializer.deserialize($get("<%=HiddenInputAppointmentInfo.ClientID%>").value);
                        if (hiddenInputValue) {
                            var subjectObject = $find('<%= RadScheduler1.ClientID %>' + "_Form_Subject");
                            subjectObject.set_value(hiddenInputValue.subject + " (by " + hiddenInputValue.speaker + ")");

                            var startTime = $find('<%= RadScheduler1.ClientID %>' + "_Form_StartTime").get_selectedDate();
                            var endTime = new Date(startTime.setMinutes(startTime.getMinutes() + parseInt(hiddenInputValue.duration)));
                            $find('<%= RadScheduler1.ClientID %>' + "_Form_EndTime").set_selectedDate(endTime);

                            $find('<%= RadScheduler1.ClientID %>' + "_Form_ResCategory").findItemByText(hiddenInputValue.category._text).select();
                        }
                    }
                }
            }

            //ToolTip events.
            //The  ToolTip is activated on Appointment's click.
            function appointmentClick(sender, args) {
                var apt = args.get_appointment();
                showTooltip(apt);
            }

            //The ToolTip contains: start/end time, subject and category for the clicked Appointment.
            function showTooltip(apt) {
                var tooltip = $find('<%=RadToolTip1.ClientID %>');
                tooltip.set_targetControl(apt.get_element());
                $get("startTime").innerHTML = "<strong>Starts on: </strong>" + apt.get_start().format("MM/dd/yyyy HH:mm");
                $get("endTime").innerHTML = "<strong>Ends on: </strong>" + apt.get_end().format("MM/dd/yyyy HH:mm");
                $get("subject").innerHTML = "<strong>Subject: </strong>" + apt.get_subject();
                $get("category").innerHTML = "<strong>Category: </strong>" + apt.get_resources().getResourceByType("Category").get_text();
                tooltip.set_text($get("contentContainer").innerHTML);
                setTimeout(function () {
                    tooltip.show();
                }, 20);
            }

            function hideTooltip() {
                setTimeout(function () {
                    var activeTooltip = Telerik.Web.UI.RadToolTip.getCurrent();
                    if (activeTooltip)
                    { activeTooltip.hide(); }
                }, 50);
            }

            function appointmentMoving(sender, args) {
                hideTooltip();
            }
               //]]>
        </script>
    </telerik:RadScriptBlock>
    <div>
        <div class="divRadios">
            <span><strong>Choose a Method to Insert an Appointment</strong></span>
            <asp:RadioButtonList ID="RadioButtonListChooseInsert" runat="server" RepeatDirection="Vertical">
                <asp:ListItem Text="Directly insert an appointment" Value="DirectInsert" Selected="true"></asp:ListItem>
                <asp:ListItem Text="Use advanced form to insert an appointment" Value="AdvancedInsert"></asp:ListItem>
            </asp:RadioButtonList>
        </div>
        <div class="background">
        </div>
        <div class="divTree">
            <span><strong>Drag a Node to the Scheduler</strong></span>
            <telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="True" Width="340px"
                OnClientNodeDropping="nodeDropping">
                <Nodes>
                    <telerik:RadTreeNode Value="1" Text="Technology" AllowDrag="false" Expanded="true">
                        <Nodes>
                            <telerik:RadTreeNode Text="A prosthetic arm that 'feels'" Speaker="Todd Kuiken" Duration="90" />
                            <telerik:RadTreeNode Text="Wireless data from every light bulb" Speaker="Harald Haas"
                                Duration="50" />
                            <telerik:RadTreeNode Text="Beware conflicts of interest" Speaker="Dan Ariely" Duration="60" />
                            <telerik:RadTreeNode Text="Can we make things that make themselves?" Speaker="Skylar Tibbits"
                                Duration="40" />
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="2" Text="Science" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="Finding life we can't imagine" Speaker="Christoph Adami"
                                Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The real reason for brains" Speaker="Daniel Wolpert" Duration="80">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Making matter come alive" Speaker="Lee Cronin" Duration="90">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Finding planets around other stars" Speaker="Lucianne Walkowicz"
                                Duration="50">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="3" Text="Business" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="3 things I learned while my plane crashed" Speaker="Ric Elias"
                                Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The surprising math of cities and corporations" Speaker="Geoffrey West"
                                Duration="60">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How the market can keep streams flowing" Speaker="Rob Harmon"
                                Duration="50">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How to use experts -- and when not to" Speaker="Noreena Hertz"
                                Duration="90">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="4" Text="Entertainment" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="On being just crazy enough" Speaker="Joshua Walters" Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="A flirtatious aria" Speaker="Danielle de Niese" Duration="60">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="A history of the universe in sound" Speaker="Honor Harger"
                                Duration="80">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="The magic of truth and lies (and iPods)" Speaker="Marko Tempest"
                                Duration="50">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                    <telerik:RadTreeNode Value="5" Text="Global Issues" AllowDrag="false">
                        <Nodes>
                            <telerik:RadTreeNode Text="We can recycle plastic" Speaker="Mike Biddle" Duration="50">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Learning from a barefoot movement" Speaker="Bunker Roy"
                                Duration="40">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="How the economic inequality harms societies" Speaker="Rickard Wilkinson"
                                Duration="70">
                            </telerik:RadTreeNode>
                            <telerik:RadTreeNode Text="Ending hunger now" Speaker="Josette Sheeran" Duration="30">
                            </telerik:RadTreeNode>
                        </Nodes>
                    </telerik:RadTreeNode>
                </Nodes>
                <CollapseAnimation Duration="100" Type="OutQuint" />
                <ExpandAnimation Duration="100" />
            </telerik:RadTreeView>
        </div>
        <div class="schedulerPositioning">
            <telerik:RadAjaxPanel ID="RadAjaxPanel" runat="server">
                <telerik:RadScheduler runat="server" ID="RadScheduler1" StartInsertingInAdvancedForm="true"
                            DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
                    OnClientAppointmentClick="appointmentClick" OnClientAppointmentMoving="appointmentMoving"
                    OnClientFormCreated="formCreated" EnableDescriptionField="true" OverflowBehavior="Auto">
                    <AdvancedForm Modal="true"></AdvancedForm>
                </telerik:RadScheduler>
                <input id="HiddenInputAppointmentInfo" name="HiddenInputAppointmentInfo" type="hidden"
                    runat="server">
            </telerik:RadAjaxPanel>
            <telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"
                AutoCloseDelay="0" ShowEvent="FromCode" Width="250px">
                <div id="contentContainer">
                    <div id="startTime">
                    </div>
                    <div id="endTime">
                    </div>
                    <div id="subject">
                    </div>
                    <div id="category">
                    </div>
                </div>
            </telerik:RadToolTip>
        </div>
    </div></asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;

public partial class Test : System.Web.UI.Page
{
    private const string ProviderSessionKey = "Telerik.Web.Examples.Scheduler.XmlSchedulerProvider.DefaultCS";

    protected void Page_Load(object sender, EventArgs e)
    {
        if (Session.Count == 0 || Session["Login"] == null || Session["Login"].ToString() == "No")
        {
            Response.Redirect("Login.aspx");
        }
    }
}

[Bozhidar]

Hi Egbert,

The demo you are using as a reference uses XML binding. The code for this binding is located in the code behind file of the page. You can navigate to the code behind file using the DefaultCS.aspx.CS button (circled in the attached screenshot).

If you add this code to your local page the Scheduler should bind properly without the DataKeyField etc. and also the CRUD operations will work.
 
Regards,
Bozhidar
Telerik

[Egbert]

Hi,

Thanks for this info.
I'm one step further now...