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

Drag and Drop Unreliable for Chrome

15 Answers 106 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 14 Jun 2017, 09:43 PM

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?

15 Answers, 1 is accepted

Sort by
0
Peter Milchev
Telerik team
answered on 19 Jun 2017, 03:14 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Adam
Top achievements
Rank 1
answered on 20 Jun 2017, 03:20 PM

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

0
Peter Milchev
Telerik team
answered on 23 Jun 2017, 03:00 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Adam
Top achievements
Rank 1
answered on 23 Jun 2017, 03:12 PM

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

0
Peter Milchev
Telerik team
answered on 28 Jun 2017, 03:46 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brian
Top achievements
Rank 1
answered on 28 Jun 2017, 06:42 PM

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

0
Brian
Top achievements
Rank 1
answered on 28 Jun 2017, 11:23 PM

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)

0
Peter Milchev
Telerik team
answered on 03 Jul 2017, 08:18 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Curtis
Top achievements
Rank 1
answered on 05 May 2020, 05:13 PM

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.

0
Peter Milchev
Telerik team
answered on 06 May 2020, 12:17 PM

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.

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Nate
Top achievements
Rank 1
answered on 25 Jun 2020, 05:44 PM
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
0
Peter Milchev
Telerik team
answered on 02 Jul 2020, 10:09 AM

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:

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Guy
Top achievements
Rank 1
answered on 02 Jul 2020, 07:47 PM
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?
0
Guy
Top achievements
Rank 1
answered on 02 Jul 2020, 08:09 PM
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!
0
Narender
Top achievements
Rank 1
Iron
answered on 11 Jun 2021, 01:28 PM

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
Telerik team
commented on 16 Jun 2021, 09:29 AM

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 
Tags
Grid
Asked by
Adam
Top achievements
Rank 1
Answers by
Peter Milchev
Telerik team
Adam
Top achievements
Rank 1
Brian
Top achievements
Rank 1
Curtis
Top achievements
Rank 1
Nate
Top achievements
Rank 1
Guy
Top achievements
Rank 1
Narender
Top achievements
Rank 1
Iron
Share this question
or