Drag issues in latest Chrome

[Marcus]

Chrome recently updated to version 32.0.1700.72 which has caused issues with drag-and-drop from a RadGrid once the page has been scrolled.

This can be reproduced by going to the demo site, http://demos.telerik.com/aspnet-ajax/scheduler/examples/draganddropintegration/defaultcs.aspx?product=grid, scrolling down slightly then attempting to drag an item from the radgrid to the scheduler. You will notice the dragged item is offset by the amount scrolled.

This is only an issue in the latest version of Google Chrome and works fine in all other browsers and works fine in Google Chrome version 31.

Has anyone found a solution to this yet or know of any workarounds?

[Igor]

I confirm we are experiencing the same issue, it seems to be an issue when you scroll down in the browser, it works correctly when you are at the top of the page, but when you scroll down it breaks.  I belive it has to do with the offset from the top of the page vs the top of the browser.  I traced it as far as a call to document.documentElement.getBoundingClientRect(), I think the behavior of this method may have changed with the latest Chrome release.

[Milena]

Hello,

I forwarded this issue to our developers and they will investigate it. In case this is caused due to a bug in our controls, we will provide a proper fix for the problem as soon as possible.

Regards,
Milena
Telerik

[Igor]

We were able to identify the root cause, Chrome changed the way it reacts to document.documentElement.scrollTop when the DOCTYPE is set to HTML5.  Previously, document.documentElement.scrollTop always returned a 0.  It now returns the correct value for if the DOCTYPE is set to HTML5 but still returns 0 for other DOCTYPES.  Google rolled out 32 to Stable yesterday, so this will be an urgent issues for Telerik customers using the HTML5 DOCTYPE.

[Igor]

The bug is in getDocumentRelativeCursorPosition, the line:

var a = b.clientY + (c.scrollTop + d.scrollTop);

should be

var a = b.clientY + (c.scrollTop || d.scrollTop);

[Matt]

I think this same issue might be affecting the grid in a situation where a grid is 100% width and 100% height.  I am having trouble starting today now that I upgraded Chrome to 32, and I am NOT having the same issue in IE/FF.  Here's the markup of my grid:

<div class="ReportGridContainer" style="width: 100%">
            <telerik:RadGrid ID="ReportGrid" runat="server" EnableViewState="true" Skin="Metro" BorderStyle="None" BorderWidth="0" Height="100%" >
                <HeaderStyle CssClass="GridHeader" />
                <ClientSettings AllowKeyboardNavigation="true" >
                    <Scrolling AllowScroll="true" UseStaticHeaders="true"  />
                    <ClientEvents OnRowClick="onRowClick" />
                    <Resizing AllowColumnResize="false" AllowResizeToFit="false" AllowRowResize="false" />
                </ClientSettings>
                <MasterTableView TableLayout="Auto" DataKeyNames="QueryStringOverrides" UseAllDataFields="true" />
            </telerik:RadGrid>
        </div>

[Milena]

Hello,

Our developers are currently working on this issue and they will provide a proper fix for it in Q3 2013 SP2. Meantime, you can use the workaround provided by Igor.

Regards,
Milena
Telerik

[Matt]

Where are we supposed to put that code change (which file)?

[Igor]

I copied the function and put it in a javascript file that loads after the telerik WebResources.axd so that it overrides the function.  Here is my code:

// This script overrides Telerik's getDocumentRelativeCursorPosition function to resolve a bug with scrollTop
Telerik.Web.CommonScripts.getDocumentRelativeCursorPosition = function (b) {
    var c = document.documentElement;
    var d = document.body;
    var f = b.clientX + (window.$telerik.getCorrectScrollLeft(c) + window.$telerik.getCorrectScrollLeft(d));
    var a = b.clientY + (c.scrollTop||d.scrollTop);
    if (window.$telerik.isIE && window.Sys.Browser.version < 8) {
        f -= 2;
        a -= 2;
    }
    return { left: f, top: a };
};

[Marcus]

I have tried adding the workaround provided by Igor but it never gets called for me.

I have checked that the function is being set using Chrome Dev Tools and it does indeed show the changes but is never called.

Any ideas?

Edit: Also tried this on the demo site using dev tools and it also still has the same problem.

[Igor]

Make sure the new script loads last, after the Telerik.Web.UI.WebResource.axd.  You can check to see if your script has overriden Telerik's by opening developer tools and typing Telerik.Web.CommonScripts.getDocumentRelativeCursorPosition.  If your version of the code comes up then you know your script loaded after Telerik's. If the function is not being called, then you have probably found a different bug.

[Marcus]

I did this and I do see my version when using dev tools (I even stuck in an alert() to be sure it wasn't firing).

[Milena]

Hello Marcus,

I would recommend you to wait for our next official release Q3 2013 SP2, where the fix will be included and verify if  the Drag-And-Drop functionality of RadGrid will work as expected on your end. The release will be available for download next week.

Regards,
Milena
Telerik

[Marcus]

Hi Milena,

I have taken a look today now that the update is out and the issue is still present on your demo site.

See the attached screenshot, my cursor is still over the RadGrid at this point but the hovering row is quite far down.

This is on Google Chrome 32.0.1700.76 (Official Build 244343) m

Thanks,
Marcus

[Milena]

Hello,

Q3 2013 SP2 was released today. Could you check the same online examples again and verify if the issue still exists on your end?

Regards,
Milena
Telerik

[Marcus]

I can confirm this is now working correctly!

Thank you very much!