Drag and drop issue with custom appointment content

7 posts, 0 answers
  1. Dave
    Dave avatar
    9 posts
    Member since:
    Jul 2010

    Posted 17 Nov 2010 Link to this post

    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.
  2. Dave
    Dave avatar
    9 posts
    Member since:
    Jul 2010

    Posted 17 Nov 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Peter
    Admin
    Peter avatar
    6637 posts

    Posted 22 Nov 2010 Link to this post

    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
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Rebecca
    Rebecca avatar
    2 posts
    Member since:
    Mar 2015

    Posted 18 Aug Link to this post

    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

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 23 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Rebecca
    Rebecca avatar
    2 posts
    Member since:
    Mar 2015

    Posted 23 Aug Link to this post

    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

  8. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    287 posts

    Posted 26 Aug Link to this post

    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
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017