UpdatePanel - postback ruins drag and drop behavior

I've been trying out the dragDropList behavior and it works fine with regular ASP.Net pages.
I then wrapped it in an UpdatePanel, and it works fine when the page is initially loaded - but as soon as a postback occurs the drag-and-drop no longer works.

I've tried putting the XML script inside the UpdatePanel, outside it, in the head, etc. I just can't get it to work.

Here's the form part of my aspx page:

<form id="form1" runat="server">
<atlas:ScriptManager ID="AtlasScriptManager" EnablePartialRendering="true" EnableViewState="true" runat="server">
 <Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
 </Scripts>
</atlas:ScriptManager
<atlas:UpdatePanel ID="MainUpdatePanel" Mode="Always" runat="server">
 <ContentTemplate>
<div id="dropArea" class="dropArea">
 <div id="content1" class="item">
<div id="content1Handle" class="itemHandle">Draggable Panel</div>
<div class="itemContent">You can drag these panels to another position in the list.</div>
 </div>
 <div id="content2" class="item">
<div id="content2Handle" class="itemHandle">Draggable Panel</div>
<div class="itemContent">
 <p>Clicking on this button will invalidate the drag-n-drop support.<br />
 I haven't figured out why yet...</p>
 <asp:Button ID="BtnTest" Text="Test" runat="server" />
 </ul>
</div>
 </div>
</div
<div class="templates">
 <div id="dropCueTemplate" class="dropCue">Let go!</div>
</div>
 </ContentTemplate>
</atlas:UpdatePanel
<script type="text/xml-script">
 <page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<!-- Drop Area --> <control id="dropArea">
<behaviors>
 <dragDropList dataType="HTML" acceptedDataTypes="'HTML'" dragMode="Move" direction="Vertical">
<dropCueTemplate>
 <template layoutElement="dropCueTemplate" />
</dropCueTemplate>
 </dragDropList>
</behaviors>
 </control
<!-- Draggable items --> <control id="content1">
<behaviors>
 <draggableListItem handle="content1Handle" />
</behaviors>
 </control
 <control id="content2">
<behaviors>
 <draggableListItem handle="content2Handle" />
</behaviors>
 </control>
</components>
 </page>
</script>
</form>

I'd appreciate any suggestions on what might be wrong and how I can fix it.Hi,

an UpdatePanel should contain only server controls, i.e. controls that can be extended by using an extender or controls that programmatically render Atlas markup.

You should avoid to wrap static HTML with an UpdatePanel, because in this case, the corresponding Atlas controls are disposed after a postback, and they are not re-instantiated as expected.
Thanks for your reply, Garbin.

Unfortunately, that is not the issue (but good to know!). I replaced everything with server controls and the issue remains. After the postback, the drag and drop no longer works.
Hi,

using server controls in this case doesn't solve the problem becauseyour problem regards the corresponding client counterparts, that aredisposed after an update is triggered.

This means that, even if you have replaced a <div id="content1" /> with a <asp:Panel id="content1" runat="server" />, you have an Atlas <control id="content1" /> that is disposed when a postback occurs, stopping the dragdrop functionality to work.

To solve this problem, you need an extender or an Atlas-enabled server control, i.e. a control that programmatically renders the <control id="..." /> stuff, because in this way the rendered Atlas markup will be parsed after a postback and the client functionality will be correctly restored.

i have the same problem but not only with my drag overlay...but i dont understand Garbin on what i need to do to fix the problem. I have attached an asp:panel to my drag overlay.

Could you please explain further on what i need to do?

thanks

o

Hi,

basically you should not put static HTML in an UpdatePanel, because
a partial update could potentially clear it.

Garbin you are my hero :)

I'm now able to do "drag & drop google style" because of you!

thank you very much!!

updatepanel & declar. way of behavior (after refresh)

Hi guys,

please can somebody help me with this issue, I probably missed something important (and small?;-))...but what could it be?

I have problem with UpdatePanel & behavior defined by declarative way. I sent you little source code which demonstrates problem. There are 2 labels and 1 button on updatepanel. After loading page when I click first label, second label should hide (there is come error now, but minority for me...although if somebody explains me why, it would be great)...ok event is caught and something happened (I agree, nothing nice now :-))...but main problem is comming, if I first press button (which makes postback and update text of Label1) and after I click Label1 - ooups nothing happened, click behaviour of Label1 disappeared. If you have any ideas, pls divide it.

Thx and have a nice day

MilKob

<%

@dotnet.itags.org.PageLanguage="VB" %>

<!

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

<scriptrunat="server">

ProtectedSub Button1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)

Label1.Text = Now.ToString

EndSub

</

script>

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

<headrunat="server">

<title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"></atlas:ScriptManager><div><atlas:UpdatePanelrunat="server"ID="updpanel"Mode="Always">

<ContentTemplate>

<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label><asp:ButtonID="Button1"runat="server"Text="Button"OnClick="Button1_Click"/><asp:LabelID="Label2"runat="server"Text="Label"></asp:Label></ContentTemplate></atlas:UpdatePanel></div>

<scripttype="text/xml-script">

<page xmlns:script=

"http://schemas.microsoft.com/xml-script/2005">

<components>

<control id=

"Label1" >

<behaviors>

<clickBehavior>

<click>

<setProperty target=

"Label2" property="visible" value="false" />

</click>

</clickBehavior>

</behaviors>

</control>

</components>

</page>

</script></form>

</

body>

</

html>hello.

i think that the problem is that the xml script that is sent from the server after the button click is "empty" and due to that you loose the behavior you've added on the initial page.

so, i'd suggest that you'd do what you're after with javascript.

Hi Luis,

thank you for your answer, although I little hoped there is a way which doesnt avoid declarativelly approach (I like it (maybe too much:-))), there is probably necessary to do that in javascript (which I wanted avoid...)

Thx again

Milo

UpdatePanel & DHTML/.htc behavior

Hoping for the final piece of my ATLAS jigsaw here...

I have a WebControl that builds a table and uses the onDocumentReady event to make it scrollable, with the code in an htc file, referenced in the behavior section of the css of the table.

My WebControl works perfectly with the ATLAS UpdatePanel, and will scroll as expected when first loaded. However - upon a callback to sort the data etc, as the onDocumentReady event will not be fired when the UpdatePanel refreshes, the DHTML doesn't get triggered, and nothing gets applied to the table in the control.

Does anyone (please) have experience, or know how, of using a control in an ATLAS UpdatePanel, that allows the DHTML to be executed (e.g. through an alternative to onDocumentReady) on callback, as it would be usually on PostBack?

Thanks in advance!

Hi,

There is no specific event for this today, but I have logged your suggestion as part of some new work we hope to be doing to UpdatePanel.

Thanks,

Eilon

UpdatePanel and custom Extender: two components with the same id cant be added to the appl

I am experiencing some strange behavior in my UpdatePanel which contains a ListView with a DataPager control. The items in the list view each have a custom ModalPopupExtender that is dynamically generated as well as a custom extender control that does some manipulation on an image.

The first page of results loads correctly, and I can move to the next page fine as well. However, when I move back to the first page, Firebug shows me the 'two components with the same id can't be added to the application' exception thrown on each of the items on the first page of the list, on the behavior associated with my custom extender. This to me seems that the partial update does not destroy or dispose the extender's behaviors when I move to the next page, so when I try to render the first page again, those extenders are still sitting in memory.

Now the kicker is, if I go to the next page and back to the first page a second time, my behaviors load correctly. Repeat and they don't show up and new errors are fired. I know this has to do with the lifecycle but I can't seem to pin it down.

Now my custom extender is fairly straightforward and only calls the base dispose() method for its own dispose() function. What am I missing?

I have narrowed down the issue to the fact that the Extender control uses a callback to attach an event to an image that has loaded dynamically from a web service call:

_onMethodComplete : function(result, userContext, methodName)
{
// Wire up image effect
var i = this.get_element();
i.onload = function(i)
{
asyncEffect(i); // This function lives in an external effects.js file
}

// Do after onload event to pick up change
this._setImage(result);
}

Doing this prevents the extender from disposing, possibly because it's still got a handle to an external JS file. I blanked out the image's onload event after the effect completes and the extender works for images that weren't previously on the page, but is still not disposing the extender correctly. Commenting out the wire up code above corrects the issue (obviously without the effects the JS file would bring).

How can I cleanly dispose an extender that references an external JS script?