Drag-n-drop fails in Chrome with zoom

[Jonathan]

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?

[Pavlina]

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

[Jonathan]

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

[Jonathan]

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. 

[Pavlina]

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