Geeks With Blogs
The Quandary Phase This code was generated by a tool.
Aha! New blog...

I think I will start by posting the solution (or, rather, a solution), to a problem which has been troubling me for the best part of a day.

To replicate the problem, simply download and run the AJAX Control Toolkit sample website, and navigate to the Reorder List sample page using IE7. You can drag and drop the list items, and all works as expected.

Now go to the site's master page, and comment out the HTML DocType declaration at the top of the template markup, and run the ReorderList sample page again. Try scrolling down the page, and then reordering the list. If you are using the current version of the toolkit (3.0.20820) with the .NET Framework 3.5, things at this point go horribly wrong.

The javascript fails to account for the page's scroll offset when the browser is running in quirks mode, which produces the odd selection behaviour.

The actual cause of the problem seems to be, not in the AjaxControlToolkit code itself, but rather in the ASP.NET AJAX extension method: Sys.UI.DomElement.getLocation, which measures the scroll offset incorrectly when running in quirks mode vs. standards compliant mode.

The AjaxControlToolkit provides its own getLocation method, which is located within the Common.js file (AjaxControlToolkit/Common/Common.js). This method initially checks the browser type of the current browser; if the current browser is IE6 or earlier, it calculates the offset itself (to avoid precisely the type of odd behaviour you are currently experiencing!). However, whilst this method works for those running IE6, it fails to check for IE7 running in quirks mode...

In order to do so, I changed this (line 160):

if (Sys.Browser.agent == Sys.Browser.InternetExplorer && Sys.Browser.version < 7) {

To this:
//EDIT: get the compability mode
var mode = document.compatMode;       
//EDIT: check the compatability mode
if (Sys.Browser.agent == Sys.Browser.InternetExplorer && 
(Sys.Browser.version < 7 || mode == 'BackCompat')) {

This by itself does not solve the problem, however. In quirks mode, you get the offset using: document.body.scrollTop. In standards compliant mode, you get the offset using: document.documentElement.scrollTop.

So, to account for this, I changed this (lines 212-3):

var ownerDocument = element.document.documentElement;
return new Sys.UI.Point(first.left - 2 - dLeft + ownerDocument.scrollLeft, 
first.top - 2 - dTop + ownerDocument.scrollTop);


To this:

//EDIT: get the scroltop/scrollleft values   
var scrollLeft = (mode == 'BackCompat') ? element.document.body.scrollLeft :
element.document.documentElement.scrollLeft;
var scrollTop = (mode == 'BackCompat') ? element.document.body.scrollTop : 
element.document.documentElement.scrollTop        
//EDIT: calculate the offsets using the correct scroll offset
var point = new Sys.UI.Point(first.left - 2 - dLeft + scrollLeft, 
first.top - 2 - dTop + scrollTop);        
return point;


And finally, just when I thought I had cracked it...I found things still weren't behaving as I had expected.

I then realised that the ReorderList's DropWatcherBehaviour.js script file (AjaxControlToolkit/ReorderList/DropWatcherBehaviour.js) was also attempting to perform its own correction for the scroll offset problem, albeit not terribly successfully.

I therefore commented out lines 138-9 of the DropWatcherBehaviour.js file, so it now looks like this:

if (oldOffset.x !== newOffset.x || oldOffset.y !== newOffset.y) {
  //var diff = AjaxControlToolkit.DragDropManager._getInstance().subtractPoints(
    oldOffset, newOffset);
  //var location = AjaxControlToolkit.DragDropManager._getInstance().subtractPoints(
    currentLocation, diff);
  $common.setLocation(dragVisualContainer, location);
}


And finally... success!

I should point out that, although this solution works for me, I haven't tested it for unintended side-effects. That said, my reorder list is now reordering regardless of scroll position, or browser compatability mode.

I hope this helps someone...


Posted on Friday, October 17, 2008 5:56 PM | Back to top


Comments on this post: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
Thanks! It saved me time on fixing this issue.
Left by Dis on Jan 10, 2009 3:16 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
Thanks your fix helped solve a big pain from MS in AjaxControlKit version 1.0.10618.0 also.
Left by Arnie on Apr 20, 2009 11:45 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
In my case, I was using the AjaxToolkit dll and couldn't edit the .js file. If you need a workaround for this, use the following code in your MasterPage:

<head...>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>

I think this is just a workaround for IE8, but this basically tells the browser to act like IE7. It's equivalent to clicking the "Compatibility" button in the address bar.
Left by WebDivalicious on Jun 30, 2009 2:34 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
Hi, wot about Line 140 in DropWatcherBehaviour.js ? It relies on the location var, commented out above ?
Left by Woodo on Sep 27, 2009 1:49 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
Hi
I too am using the AjaxControlToolkit.dll and so cannot edit these .js files. I cannot simply add the compatability mode as my company are still using IE6 (don't ask!!!). Can anyone help please as I am in real need of fixing this scroll bug for an application which I need to release by Friday! Very stressed :(
Left by Cassy Lake on Mar 07, 2010 11:16 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
@cassy: if it's not too late, you can download the source code for the toolkit here:
http://ajax.codeplex.com/sourcecontrol/list/changesets?ProjectName=ajax#DownloadLatest

You can then make the above modifications and compile your own custom version of the DLL. Hope this helps.
Left by adampooler on Mar 19, 2010 11:39 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
thank you
Left by ugg nightfall on Nov 17, 2010 6:43 PM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
By using the AjaxControlToolkit.dll and so cannot edit these .js files. I cannot simply add the compatability mode as my company are still using IE6 (don't ask!!!). Can anyone help please as I am in real need of fixing this scroll bug for an application which I need to release by Friday! The added inshight increases my insights about:Indonesian Furniture | Indonesian Teak Furniture.
Left by Deddy Agoes on Dec 07, 2010 5:25 AM

# re: AJAX Reorder List, Page Scrolling, and IE7 Quirks Mode Problems
Requesting Gravatar...
I absolutely adore your site! You aggressive me as able-bodied as all the others actuality and your broiled PS is absolutely nice. Thank you for afflatus and accumulate up the acceptable work thanks!
Left by Virtual Dedicated Hosting on Feb 15, 2011 9:17 PM

Comments have been closed on this topic.
Copyright © Adam Pooler | Powered by: GeeksWithBlogs.net