Is Atlas compatible with Master Pages?

Hi,

I've got an issue that I have been trying to lock down for about a week now with no success and could really do with some input.
Basically I have a panel that i have extended with the Drag Panel Extender, when I try to drag the panel it jumps down and to the right! I can still drag the panel around but it's offset from the mouse position. Also simply clicking on the Drag Handle caused the whole panel to jupm down and to the right, each click causes is to jump again.

I have managed to trace this issue down to the way I have my project set up.

I am using Master Pages and have a content placeholder that is offset from the top and left corners of my page as I have headers and a panel on the left that I want on every page. I have noted through painstakingly measuring using a pixel ruler that the jump the panel takes is exactly the offset of the content placeholder from the top left of the browser rendering area.

To clarify: the top of my placeholer is 150px and the left is 200px.
When i click on theDrag Handle the panel jumps 150px down and 200px right from the mouse, I have looked through the javascript etc in the control toolkit and I have not been able to find what I'm looking for.

I found the StartDrag routine and there is ome stuff in there that sets the mouseposition and then sets the start position for the drag to be that same position but while I'm sure this is wrong, I as unable to successfully correct anything in here to stop the behaviour.

I think that the top left of the drag panel is being set relative to the browser render surface when the panel itself is relative to the content placeholder so you get this offset issue.

I can get a successful drag panel working when I move it to the master page but as I am trying to create a custom user control with a popup dialog that can be dragged around the page this is not a good solution.

i need ideas to solve this offsetting problem other than moving the panel ot of my cotrol and onto the master page as this will stop me from releasing a control that users can drag onto a page and just use, popup draggable dialog and all...

Hi SNewman,

Is the target of yourDragPanel absolutely positioned? One of the first things that thefloatingBehavior (which is the "Atlas" behavior used byDragPanel) does is setsposition: absolute; and setstop/left to the its original coordinates (although it sounds like in your case, it's mistaken about these coordinates).

Thanks,
Ted

Hi Ted,

Yup the target is absolutely positioned.

What I found was that there is some code that works out the old position of the drag panel (I'm guessing so it could send it back there if I were to do a drag drop and the drop need to be cancelled?) and it appears to do this based on the mouse position using the x, y coordinates and then there is a calculation performed based on that. I was not able to confirm that this is the calculation causing the issue but it kind of fits as the x, y, co-ordinates of the mouse are relative to the browser? while the top and left co-ordinates of the drag handle are relative to the content placeholder.

Does this sound right to you?

Hi SNewman,

Yeah, I followed the code through about that far myself when I looked at it the other day. Could you try it without the target being absolutely positioned and see if that works? Here's the code forgetLocation:

Sys.UI.Control.getLocation =function(element) {|
var offsetX = 0;
var offsetY = 0;
var parent;
for (parent = element; parent; parent = parent.offsetParent) {
if (parent.offsetLeft) {
offsetX += parent.offsetLeft;
}
if (parent.offsetTop) {
offsetY += parent.offsetTop;
}
}
return { x: offsetX, y: offsetY };
}

My guess is that since it doesn't check to see if your control is absolutely positioned, it walks all the way up the hierarchy and computes where it would be if it wasn't absolutely positioned.

Thanks,
Ted

Hello Ted,

Is there a solution for this? I'm unable to remove the position:absolute due to the fact that I'm trying to set the location of the dragPanel dynamicly. When I remove the flag the panel always displays at 0, 0. Can you offer any suggestions? I'm using Change Set 5716 of the control toolkit.

Thanks,

Lance

<%@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default3.aspx.cs"Inherits="input_pages_Default3" %>

<%@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<scripttype="text/javascript"language="javascript">

function getInputHelp()

{

$('helpHeader').innerHTML ='Header text';

$('helpContent').innerHTML ='Body Text';

$('helpDragPanel').style.left ='100px';

$('helpDragPanel').style.top ='75px';

$('helpDragPanel').style.visibility ='visible';

}

function closeHelp()

{

$('helpHeader').innerHTML ='';

$('helpContent').innerHTML ='';

$('helpDragPanel').style.visibility ='hidden';

}

</script>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">

</atlas:ScriptManager>

<body>

<formid="form1"runat="server">

<atlasToolkit:DragPanelExtenderID="dragpeHelp"runat="server">

<atlasToolkit:DragPanelPropertiesTargetControlID="panelHelp"DragHandleID="panelHelpHeader">

</atlasToolkit:DragPanelProperties>

</atlasToolkit:DragPanelExtender>

<divid="helpDragPanel"style="width: 150px; visibility:hidden; position:absolute">

<asp:PanelID="panelHelp"runat="server"Width="100%"CssClass="HelpDragPanel">

<asp:PanelBackColor="lightblue"BorderStyle="Solid"BorderWidth="1px"BorderColor="black"ID="panelHelpHeader"runat="server"Width="100%">

<divid="helpHeader"></div>

<imgid="Img1"src="../../images/dev.jpg"alt="DevHelp"onclick="closeHelp()"/>

</asp:Panel>

<asp:PanelBorderStyle="Solid"BackColor="gray"ForeColor="black"BorderWidth="1px"BorderColor="black"ID="panelHelpContent"runat="server"Width="100%">

<divid="helpContent">

</div>

</asp:Panel>

</asp:Panel>

</div>

<div>

<imgsrc="../../images/qMark.jpg"id="widthFeetHelp"alt="help"onclick="getInputHelp()"/>

</div>

</form>

</body>

</html>

Sorry for the second post, but does anyone have any idea's?

I'm seeing this issue in the released toolkit of 09/14 also.

Thanks,

Lance

Hi Lance,

Unfortunately this is a problem due to "Atlas" and the Toolkit can't outright modify the code to get it working. However, since this is a static function, you could replace it from your own code using something like:

Sys.UI.Control.getLocation =function(element) { /* Do whatever it used to do, but also check if absolutely positioned */};

As long as you replace that before your drag panel is initialized, it will be used instead of the incorrect function. I know this is a very awkward hack, but I think it's your only option aside from modifying the "Atlas" scripts themeslves.

Thanks,
Ted

Hello Ted,

Thanks for the info. Do you see this being corrected in Atlas or am I trying to do something that was never intended?

I'm pretty new to this, so could you give me a hint on where to putSys.UI.Control.getLocation =function(element). When I add it to the page I get Sys is undefined. I do have the atlas:ScriptManager on the page.

Thanks

Lance

Hello Ted,

One of my counter parts found a work around for this. Here is what he used.

We moved the asp:panel (ID = panelHelp) outside of the div tag (ID = helpDragPanel). Set the style for both tostyle="visibility:hidden; position:absolute".

<asp:PanelID="panelHelp"runat="server"Width="100%"style="visibility:hidden; position:absolute">

<divid="helpDragPanel"style="width: 150px; position:absolute; visibility:hidden; ">

<asp:PanelBackColor="lightblue"BorderStyle="Solid"BorderWidth="1px"BorderColor="black"ID="panelHelpHeader"runat="server"Width="100%">

<divid="helpHeader"></div>

<imgid="Img1"src="../../images/dev.jpg"alt="DevHelp"onclick="closeHelp()"/>

</asp:Panel>

<asp:PanelBorderStyle="Solid"BackColor="gray"ForeColor="black"BorderWidth="1px"BorderColor="black"ID="panelHelpContent"runat="server"Width="100%">

<divid="helpContent">

</div>

</asp:Panel>

</div>

</asp:Panel>

By doing this, everything works as expected.

All examples I've seen shows it the other way around, but this seems to work fine.

Hopefully this will help someone else out.

Thanks,

Lance

Hi Lance,

You want to add that after the "Atlas" scripts have been loaded. The easiest way to do that is to add a JavaScript function on your page calledpageLoad (which "Atlas" will automatically call if there). Ex:
function pageLoad()
{
alert('"Altas" has finished loading - we can access whatever we want now');
Sys.UI.Control.getLocation = function(element) { return {'x':0, 'y':0}; };
}

Thanks,
Ted
Hi Lance,

I'm not 100% sure why your workaround is fixing the problem, but I'm glad you've got it taken care of. Here's another way to do it (for those following along at home who are a little confused about this whole problem):

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"><title>Test Page</title></head><body><form runat="server"><div> <atlas:ScriptManager id="ScriptManager1" runat="Server"></atlas:ScriptManager> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <div id="anchorDiv"> <asp:Panel ID="Content" runat="server" style="position: absolute; top: 10px; left: 10px; width: 100px;"> <asp:Panel ID="Handle" runat="server" style="border: 1px solid #000000; width: 100%; height: 20px;">Drag Me</asp:Panel> <div style="border: 1px solid #000000; width: 100%; height: 100px;">Content</div> </asp:Panel> </div> <atlasToolkit:DragPanelExtender ID="MyExtender" runat="server"> <atlasToolkit:DragPanelProperties TargetControlID="Content" DragHandleID="Handle" /> </atlasToolkit:DragPanelExtender> <script type="text/javascript"> // The following snippet works around a problem where Atlas's FloatingBehavior // doesn't allow drops outside the "content area" of the page - where "content // area" is a little unusual for our sample web pages due to their use of CSS // for layout. function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px"; } setBodyHeightToContentHeight(); window.attachEvent('onresize', setBodyHeightToContentHeight); </script></div></form></body></html>

This works becauseanchorDiv is not absolutely positioned. If you addstyle='position: absolute' toanchorDiv, then you'll see the bug that we're talking about.

This is definitely a bug in the "Atlas"Sys.UI.Control.getLocation function. I'm not sure about when they'll have it fixed, but in the meantime if you need a better version of the function you can use the one provided in our Common.js file that Ron Buckton (a community contributor!) wrote.

Thanks,
Ted
where can i find the Common.js you was talking about ?
Hi MrVithan,

You can find Common.js in the AjaxControlToolkit\AjaxControlToolkit\Common\ folder.

Thanks,
Ted

Hi Ted,

if we use the version in the common.js do we need to specifically include this .js or is it automagically downloaded as part of the control toolkit at runtime? can you give an example of how to correctly access the function in this common.js, correctly overriding the base version?

If anyone from MS is actually paying attention to this thread... It really would be nice if you fixed this bug, it's not exactly a small issue

Thank in advance Ted.

This is the same bug I reported a couple days ago. I provided a repro and a fix. The bug is in the AjaxControlToolkit.DragDropManager, so you can fix it, I think.

This is the thread:

http://forums.asp.net/thread/1437484.aspx

Regards