Drag and Drop Unreliable for Chrome

[Adam]

In IE, RadGrid drag-and-drop works properly, but in Chrome it works less than 1/2 the time I try to move rows up/down.
When I set a breakpoint in the RowDrop event (server side), the event fields aren't consistently populated in Chrome.

My browser is not zoomed in or out and it's easy to duplicate with your website's example:
http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/rows/drag-and-drop/defaultcs.aspx

Many people have had issues with this over the years but I cannot find any resolution. Some people pointed to the RadGrid being in a MasterPage or in a UserControl, but none of that should matter.

Can you please provide resolution?

[Peter Milchev]

Hello Adam,

As demonstrated in this screencast, we were unable to replicate the issue you are describing.

Please find attached the sample project we used to record the screencast. To run the project, the Telerik.Web.UI assemblies should be added to the Bin folder of the project.

Would you please modify it so that it better represents your configuration and reproduces the issue and send it back to us(excluding the Bin folder) in an official support ticket along with more details and specific examples(screenshots, screencasts) of the steps for reproduction? Thus, we would be able to investigate locally and help you more efficiently. 

Once we have a closure in the support ticket, we can share it here for the community.

Regards,
Peter Milchev
Progress Telerik

[Adam]

Peter,

Thanks for the reply, the video, and the sample code.
I don't have SQL Express installed so I'll have to work through that first  in order to try our your code.

But we don't need your sample code...your demo website has the same issues.
See this video of me trying to your website: https://www.youtube.com/watch?v=lFsGRe8p0Z8

And it's not my machine. I have many customers who complain about this every week. They are on PCs and Macs.

Please advise. Thanks.
Adam

[Peter Milchev]

Hello Adam,

We will be happy to assist you further but unfortunately, we are still unable to replicate the issue neither on Windows nor on Mac. 

Is there anything specific in the used browsers? Are there any enabled add-ons that might prevent the proper behavior of the Grid? 

Also, would you please open the browser console and check if there are any JavaScript errors when the proper dragging is failing? 

Thank you in advance for your cooperation.

Regards,
Peter Milchev
Progress Telerik

[Adam]

There is nothing special about these computers or browsers. No add ons either.
I opened the console and no messages or errors are generated when the drag/drop doesn't work.
It's strange that it visually shows where the drag is going, but the event doesn't have that information.
I'm not the first to report this (search google)...it's a real issue needs to be resolved.
I just purchased my subscription last week. If it cannot be fixed, let me know ASAP so I can get a refund. I can rewrite my code to use DevExpress drag and drop (their demo works perfectly for me).

Thanks,
Adam

[Peter Milchev]

Hello Adam,

We have investigated again the scenario and we were able to replicate that when the browser is slightly zoomed. In the video that you have provided, there is a slight difference in the rendering (as demonstrated in this screenshot), that leads us into thinking that this behavior is caused by the Google Chrome bug - CSS hover is not triggered when dragging into an element. 

We have this logged as an issue also in our Telerik Ajax Feedback and Ideas portal - RadGrid items drag-drop functionality does not work correctly when Chrome is zoomed to 90%. 

We have a workaround that solves the zooming problem that we would like to ask you to try and check if it solves the drag and drop issue for you. You just have to include the following script in the form tag of the application. 

Telerik.Web.UI.Grid.PositionDragElement = function(element, mouseEvent)
{
    var clientX = $telerik.isTouchDevice ? $telerik.getTouchEventLocation(mouseEvent).x : mouseEvent.clientX;
    var clientY = $telerik.isTouchDevice ? $telerik.getTouchEventLocation(mouseEvent).y : mouseEvent.clientY;

    element.style.top = clientY + $telerik.getDocumentElementScrollTop() + 10 + "px";
    element.style.left = clientX + $telerik.getDocumentElementScrollLeft() + 10 + "px";
    if ($telerik.isOpera || $telerik.isTouchDevice)
    {
        element.style.top = parseInt(element.style.top, 10) - document.body.scrollTop + "px";
    }
};

After further testing, if that solves the issues, we can include it in our controls' source code.

Let us know the result of including the fix into your code.

Regards,
Peter Milchev
Progress Telerik

[Brian]

Peter,

Thanks for the update. I will try this update today and get back to you ASAP.
Note: I was not zoomed in or out so hopefully this still helps.

Thanks,
Brian

[Brian]

Peter,

The code change provided works perfectly! We added it to our solution and tested it. In addition, a few customers tested it and were pleased with how it now works. Thanks a lot!

Brian
(I work with Adam)

[Peter Milchev]

Hello Brian,

Thank you for your feedback, I am glad that everything is working smoothly now.

We will take your testing results into consideration and we will try to include the fix in an official release as soon as possible. 

Regards,
Peter Milchev
Progress Telerik

[Curtis]

This exact same thing is happening when drag and dropping via the RadListView in Chrome for Mac, and also in WIndows Chrome when zoomed in.

It occurs on your demo: https://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

What would be the fix for the RadListView?

 

Also, are there any plans to release the Kendo UI Sortable via ASP.NET AJAX? The Sortable control works perfectly in Chrome and other browsers. This would be an amazing control to have for the ASP.NET AJAX control set.

[Peter Milchev]

Hello Curtis,

Would you please give more specifics on what exactly resolution and zoom you are testing and record a short video demonstrating the reproduction steps and the not working scenario in Chrome and the working one in FireFox for example? 

Regarding the Sortable, it is not in our immediate plans for implementation. You can submit it as a Feature Request in our feedback portal and share more details on how you see this helpful, example business cases and some benefits that are not available when using the Kendo UI Sortable widget on the aspx page.

• https://feedback.telerik.com/aspnet-ajax

Regards,
Peter Milchev
Progress Telerik

[Nate]

I have zoomed out to 90% in my chrome in Windows and this example on your web site is not working, do you really need us to record a video of your own example not working? 

https://demos.telerik.com/aspnet-ajax/listview/examples/itemdragdrop/defaultcs.aspx

[Peter Milchev]

Hello Nate,

We have reviewed the demo and indeed there are some improvements that can be applied 

1) Use mouseleave instead of mouseout as the mouseout is triggered when hovering the text:

• https://stackoverflow.com/questions/6092087/why-does-mouseout-fire-when-hovering-over-text-inside-the-mouseout-target 

• <asp:LinkButton ID="GenreLink" runat="server" CommandName="ShowTracks" CommandArgument='<%# Eval("Key") %>'
                              onmouseover='this.className += " selected";' onmouseleave='this.className = this.className.split(" selected").join("");'>

2) Set a margin for the dragged item as moving the mouse hovers over the dragged element until its position is updated:

 /* old */
div.RadListView div.rlvDraggedItem
{
    border:0;
    margin:0;
}
/* new */
div.RadListView.rlvDraggedItem {
    border: 0;
    margin: 10px;
}

 

We have also updated the demo so please give it a try and let us know if you still experience any issues.

Regards,
Peter Milchev
Progress Telerik

[Guy]

I am encountering this same issue when the target I am dropping into is a RadListBox. That particular control seems to only have an OnClientMouseOut property exposed, not one for onmouseleave (or at least not an obvious one). Any suggestions on how to implement this fix on a RadListBox control?

[Guy]

Never mind. Though my question about onmouseleave is legitimate, I was able to get the RadListBox to accept drops with implementing the CSS change you gave. 

Thank you for posting that!

[Narender]

I am using Radlistview control drag and drop functionality. Radlistview items are drag and dropping into Repeater control. this functionality working in chrome older version but not working in latest chrome version. I have verified my code..args.get_destinationElement().id;  method returning repeater id   in older version  but in newer version this method returning Radlistview control id. so destination element id returning wrong in newer version. how to overcome on this issue. please help me on this. please find the below my code. 

function trackDropping(sender, args) {
    debugger;
   var dest = args.get_destinationElement();    
   if (!dest || !dest.id || dest.id.indexOf("TeamLink") < 0) {
       args.set_cancel(true); 
    }

Telerik Web UI ListView Items Drag-and-drop Demo | Telerik UI for ASP.NET AJAX

 

[Peter Milchev]

As some more information is needed for us to replicate the issue and provide more accurate suggestions I recommend sharing the details and continue the discussion in the duplicate forum thread you have created here: https://www.telerik.com/forums/radlistview-not-working-in-google-chrome-latest-version-91-0-4472-77-official-build-64-bit