Error when moving appointment with image

[Datamex]

Hi,

We found another problem in the scheduler control.
For you information: We are using webservices with the advanced form.

We are showing images in the appointments on the schedular, like on the following image:
http://bart.nimio.info/images/fora/scheduler3.JPG

But when i tried to move an appointment by clicking on the image, nothing happens until i release the mouse button.
Then the appointment is stuck to the mouse pointer, after that i can't put the appointment back to the original place without updating the appointment or i can't put the appointment back to the scheduler at all. After that i am getting a lot of javascript errors when trying to move another appointment.

We are using the following code to enable images on the appointment:

/// <summary>
      /// Occurs when a timeslot is created.
      /// Sets the AppointmentType image, as well as the AppointmentState catagory color.
      /// </summary>
      /// <param name="sender">telerik:RadScheduler</param>
      /// <param name="e">telerik:TimeSlot</param>
      /// <returns>null</returns>
      function TimeSlotCreated(sender, e) {
        var app = e.get_appointment();
        var element = e.get_appointment().get_element();
        var attributeCollection = app.get_attributes();
        var StateIconName = attributeCollection.getAttribute("StateIconName");
        var SubStateIconName = attributeCollection.getAttribute("SubStateIconName");
        var RsCategory = RgbStringToRadStyleString(attributeCollection.getAttribute("Color"));
        var customerName = attributeCollection.getAttribute("CustomerName");
        var startTime = app.get_start().format("MMM dd, yyyy HH:mm:ss");
        attributeCollection.setAttribute("OriginalStartTime", startTime);

        // Set the tooltip of the appointment
        if (customerName == null) { customerName = "Geen klant"; }
        app.set_toolTip("Afspraak: " + app.get_toolTip() + "\n" + "Klant:       " + customerName);

        // Set the stateimage
        var image = document.createElement("img");
        image.setAttribute("src", '<%= System.Configuration.ConfigurationManager.AppSettings["IconDirectory"].Replace("~","") %>' + StateIconName);
        image.setAttribute("alt", 'IconImage');

        // If the appointment has a substate then show the substateimage
        if (SubStateIconName != null) {
          var image2 = document.createElement("img");
          image2.setAttribute("src", '<%= System.Configuration.ConfigurationManager.AppSettings["IconDirectory"].Replace("~","") %>' + SubStateIconName);
          image2.setAttribute("alt", 'IconImage');
        }

        element.setAttribute("class", element.className + " rsCategory" + RsCategory);

        // All appointments with ID 0 are script generated, they are not actually appointments within the database, thus must not be allowed to
        // be edited/moved or resized in any way shape or form.
        if (app.get_id() == 0) {
          app.set_allowDelete(false);
          app.set_allowEdit(false);
        }

        var divs = element.getElementsByTagName('div');
        var result;
        var innerHTML;
        for (i = 0; i < divs.length; i++) {
          // IE and its eternal spacing issues *sigh*
          if ($telerik.$(divs[i]).is("div.rsAptContent")) {
            result = divs[i];
            innerHTML = result.innerHTML;
            result.innerHTML = '';
            result.appendChild(image);

            // If the appointment has a substate then show the substateimage
            if (SubStateIconName != null) { result.appendChild(image2); }

            result.innerHTML = result.innerHTML + innerHTML;
            result.innerHTML = result.innerHTML + "<br />";

            if (customerName != "Geen klant") {
              result.innerHTML = result.innerHTML + customerName;
            }
            return;
          }
        }

      }

Is this a bug and is there a fix or workaround for this problem?

[Datamex]

Hi,

I made a video of the problem:

http://webstaal.datamex.nl/test/2009-08-19_1002.swf

You can see that the first time i can move the appointment without a problem.
But when i move the appointment by clicking on the image, the appointment get stuck on the mouse pointer.
After that i can't move any appointments anymore and i'm getting a lot of javascript errors.

[Peter]

Hi Datamex,

This is a common problem when using images in AppointmentTemplate. Here is a workaround:

 <AppointmentTemplate>
            <asp:Image ID="image1" runat="server" ondragstart="javascript:return false;" src="flag.jpg" />
        </AppointmentTemplate>

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.

[Datamex]

Thanks peter Its working!!