Drag and drop issue with custom appointment content

[Dave]

Hi,

I have a strange behaviour when dragging and dropping appointments in RadScheduler. What I am seeing is that under some circumstances, if the mouse button is released, the cursor still has a drag/drop helper tracking it - on clicking the mouse button again, the drop completes, but the helper still follows the cursor, if I click again, the drag completes again, in fact the ghost does not go away at all!

It appears to occur if the mouse button is accidentally released during the start of the drag - often happens with laptop panels rather than mice.

I suspect that this is my fault however, because I have inserted icons into each appointment using JQuery, and it appears that the drag operation sometimes doesn't start properly when the icon is dragged, but seems to start fine if I drag the appointment background (or the text).

Does anybody know either:

A) How I can make my inserted IMG tag act as in integral part of the appointment, or
B) Have I overlooked a RadScheduler ClientLib method of adding an icon to an appointment.

Thanks in advance for your help on this.

[Dave]

Just thought it may be worth pasting the resultant HTML of an Appointment:

<div style="width: 300px; height: 21px;" id="1569157292"
class="rsApt rsCategoryBlue rsCategoryBlue rsCategoryOrange rsCategoryBlue">
    <div style="height: 21px;" class="rsAptOut">
        <div style="" class="rsAptMid">
            <div style="" class="rsAptIn">
                <div style="" class="rsAptContent">
                    <img class="ocStatusIcon" src="images/icons/small/notworking.png">
                    WS13 6QT: Goodyear 222
                    <a style="visibility: hidden;" class="rsAptDelete" href="#">delete</a>
                </div>
            </div>
            <div class="rsAptResize"></div>
        </div>
    </div>
</div>

The <img> with class ocStatusIcon is my addition - csas for this only has margin and vertical-align, so I don't think that it's that.

Cheers.

[Peter]

Hi Dave,

I tend to think that your assumption is correct - using jQuery to add an image to the appointment could be causing this problem.

If you need to customize the appointments' appearance, the recommended approach is to use AppointmentTemplate as shown in this demo. Please, try this suggestion and let us know how it goes.


Regards,
Peter
the Telerik team

[Rebecca]

Hello Dave,

Did you ever find a solution to this issue?  We also have found that by single clicking on an icon on the appointment and then attempting to drag this appointment to another timeslot causes the appointment to "stick" to the mouse.  I am hoping there is an answer to this annoying problem.  Sometimes the appointment "breaks loose" but other times the only solution is a full refresh of the page.  Any help would be appreciated.

 

Thank you,

 

Rebecca Miller

[Veselin Tsvetanov]

Hello Rebecca,

The cause of this problem is the fact that the <img> element which is placed within the appointment element is selectable (and also clickable). To resolve this issue, you will have to disable that behavior of the <img>. In modern browsers (IE 11, Chrome, Firefox, Safari, Edge), you could do that by applying the following CSS rule:

.rsAptContent img {
    pointer-events: none;
}

To achieve the same on previous version of IE (it is also applicable for the other browsers), you will have to implement the following JavaScript:

var handler = function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName.toLowerCase() === 'img') {
        if (!e.preventDefault) {
            e.returnValue = false;
            e.cancelBubble = true;
        }
        e.preventDefault();
        e.stopPropagation();
    }
};

if (window.addEventListener) {
    // On all browsers
    window.addEventListener('click', handler, false);
} else {
    // On IE 8
    window.attachEvent('onclick', handler);
}

Regards,
Veselin Tsvetanov
Telerik by Progress

[Rebecca]

Hello Veselin,

 

Thank you for your response.  This has gotten me closer, unfortunately it does not allow for the user to double click on the image to open a radwindow as this is disabled with this change. We need to be able to click on the icon to open the window but disable the ability for the user to drag the image to a timeslot.

Thank you in advance for your assistance,

 

Rebecca Miller

[Veselin Tsvetanov]

Hello Rebecca,

If you need to keep the double-click functionality on the images, instead of using <img>, you will have to use <div> elements that have as their background the images. Implementation of background images applied to Appointment templates could be found in the following demo.

Note that in this implementation you won't have to disable the click functionality as shown in my previous post.

Regards,
Veselin Tsvetanov
Telerik by Progress