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

Drag-n-drop fails in Chrome with zoom

4 Answers 204 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jonathan
Top achievements
Rank 1
Jonathan asked on 19 Oct 2012, 08:06 PM
We have found that if you zoom in (CTRL +) or use the zoom menu in Chrome to zoom the drag-n-drop functionality becomes unpredicatble - sometimes it will work and sometimes it won't. IE and Firefox don't seem to have this problem. 

I have been able to recreate this issue in this demo (as well as our app):
http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

If you drag an item to the recycle bin depending on where you drop it - the drop may or may not work. Specifically I have found that there is a point in the middle of the basket where it will fail consistently - when zoomed in a little. In the demo the cursor turns into a hand when the item is over the recycle bin and when that happens the drop usually works. However it seems if you are hovering over the bin and the cursor is still a standard arrow and you drop it - the drop fails and the item is not removed from the grid.

I don't know if this is something that Telerik or anyone other than the Chrome team can fix. Any thoughts, suggestions?

4 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 24 Oct 2012, 10:08 AM
Hello,

I consulted with our developers about this problem and they told me that this is a bug in Chrome with returning the right position of the mouse, when the window is zoomed with the property document.body.style.zoom.

I am sending you a workaround that patched the problem in Chrome, but there is not guarantee the same will work in future versions of this browser. You should add the javascript function after RadScriptManager:
<script type="text/javascript">       
    Telerik.Web.UI.GridSelection.prototype._resizeRowSelectorArea = function (e)
    {
        if((this._rowSelectorArea) && (this._rowSelectorArea.parentNode))
        {
            var zoomProportion = 1;
            if($telerik.isSafari)
                zoomProportion = ($get('i1').value / 100);  // Get the zoom level from input with ID='i1';
            var currentElement = Telerik.Web.UI.Grid.GetCurrentElement(e);
  
            if((!currentElement) ||
 
            (!Telerik.Web.UI.Grid.IsChildOf(currentElement, this._owner.get_element())))
                return;
            var oldPosX = parseInt(this._rowSelectorArea.style.left);
            var newPosX = Telerik.Web.UI.Grid.GetEventPosX(e)/zoomProportion;
            var oldPosY = parseInt(this._rowSelectorArea.style.top);
            var newPosY = Telerik.Web.UI.Grid.GetEventPosY(e)/zoomProportion;
            if(newPosY >= $telerik.getLocation(this._rowSelectorArea).y + this._rowSelectorArea.offsetHeight &&
            this._rowSelectorArea.dragDirectionTop)
            {
 
                this._rowSelectorArea.dragDirectionTop = null;
            }
 
            if((newPosX - oldPosX - 5) > 0)
  
                this._rowSelectorArea.style.width = newPosX - oldPosX - 5 + "px";
 
            if(this._rowSelectorArea.offsetWidth > this._owner.get_element().offsetWidth)
            {
                this._rowSelectorArea.style.width = this._owner.get_element().offsetWidth + "px";
            }
  
            if(newPosY > oldPosY && !this._rowSelectorArea.dragDirectionTop)
 
            {
                if((newPosY - oldPosY - 5) > 0)
                    this._rowSelectorArea.style.height = newPosY - oldPosY - 5 + "px";
            }
 
            else
 
            {
  
                if(!this._rowSelectorArea.dragDirectionTop)
 
                {
 
                    this._rowSelectorArea.dragDirectionTop = true;
 
                }
 
                if((oldPosY - newPosY - 5) > 0 || this._rowSelectorArea.dragDirectionTop)
                {
                    this._rowSelectorArea.style.top = newPosY - 5 + "px";
                    var height = Telerik.Web.UI.Grid.FindPosY(this._firstRow)
                    - parseInt(this._rowSelectorArea.style.top) - 5;
  
                    if(height > 0)
  
                    {
 
                        if(this._owner._gridDataDiv)
 
                        {
 
                            if((this._owner._gridDataDiv.offsetHeight + this._owner._gridDataDiv.offsetTop) > parseInt(this._rowSelectorArea.style.top) + height)
  
                            {
                                this._rowSelectorArea.style.height = height + "px";
                            }
                            else
  
                            {
                                var currentHeight = (this._owner._gridDataDiv.offsetHeight + this._owner._gridDataDiv.offsetTop) - parseInt(this._rowSelectorArea.style.top) - 5;
  
                                this._rowSelectorArea.style.height = (currentHeight >= 0) ? currentHeight + "px" : 0 + "px";
                            }
                        }
  
                        else
 
                        {
                            this._rowSelectorArea.style.height = height + "px";
                        }
  
                    }
 
                }
            }
        }
    }
</script>

All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jonathan
Top achievements
Rank 1
answered on 24 Oct 2012, 04:22 PM
Thanks for the response. 
I am trying to add the script to my page to test but I keep getting a javascript error: 
Uncaught TypeError: Cannot read property 'prototype' of undefined

and this is the line causing the error:
Telerik.Web.UI.GridSelection.prototype._resizeRowSelectorArea = function (e) {

Can you provide an example of how to add this script to the page correctly so that I can avoid this error. 

I have a RadScriptManager in my master page and also use a RadAjaxManager to ajaxify my grids. 

I copied your script into a new js file named zoomFix.js. This is how I tried to add this to my page:
In the Page_Load event:
RadScriptManager.GetCurrent(this.Page).Scripts.Add(new System.Web.UI.ScriptReference(Page.ResolveUrl("~/Scripts/zoomFix.js")));


Then I tried to wrap the script you sent as a function that I could call on startup and still had the same problem. 
ClientScript.RegisterStartupScript(typeof(System.Web.UI.Page), "ZoomFix", "DoZoomFix(); ", true);

I should also mention that this particular page has 4 different grids on it and not all are visible at the same time and are in 1 of 2 RadPageViews . One is on the default grid that does not use drag-drop and the other three are on the second pageview and do use drag-drop to move items between them. Perhaps the problem is occurring because my script is on the page before the grids are.

Thanks, 
Jonathan
0
Jonathan
Top achievements
Rank 1
answered on 24 Oct 2012, 07:13 PM
Thanks for providing a script that you thought would help but perhaps my scenarios are too specific for it to work.


I have a simpler page then the one I initially posted my reply on above. 
This one has two grids side by side that are displayed immediately. 

I inserted the script using this immediately after the closing tag of the second grid.
<script type="text/javascript" src="Scripts/zoomFix.js"  ></script>

This does not create a javascript error. Also when I added an alert("zoomFix"); to the referenced file this alert also showed on page load so I know the script is there and seems to running.

However the drag-drop still is inconsistently failing when zoomed. 

0
Pavlina
Telerik team
answered on 29 Oct 2012, 12:19 PM
Hi Jonathan,

At this point to be able to provide a proper solution for your specific scenario it will be best if you open a formal support ticket and send us a sample project where the problem can be observed. We will examine it and will advice you further.

All the best,
Pavlina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
Jonathan
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
Jonathan
Top achievements
Rank 1
Share this question
or