This is a migrated thread and some comments may be shown as answers.

Error when moving appointment with image

3 Answers 100 Views

Scheduler

This is a migrated thread and some comments may be shown as answers.

Datamex asked on 19 Aug 2009, 06:48 AM

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?

3 Answers, 1 is accepted

Accepted

answered on 19 Aug 2009, 05:07 PM

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.