[CLOSED] Drag does not function after postback to UpdatePanel

**IT1333** · Oct 24, 2011, 8:11 PM

I am using a DragZone on the page. The page also has an UpdatePanel. I am dragging an item from inside the UpdatePanel. On initial load, everything works fine. If the UpdatePanel updates then the drag will no longer work.

I have created a example based upon your DragDrop example 2. When the page is loaded you can drag and drop to your heart's content. After you press the "BigButton" and the update panel is refreshed, drag becomes impossible; the getDragData and the onInitDrag functions are never called.

Aspx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DragProblem.aspx.cs" Inherits="CJLRDWeb.Tests.DragProblem" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!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 id="Head1" runat="server">
    <title>Drag&amp;Drop - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
        body {
            font-size: 11px;
            font-family: arial;
        }
        .dd-ct {
            position:relative;
            border: 1px solid silver;
            width: 180px;
            height: 180px;
            background-color: #ffffc0;
        }
        #dd1-ct {
            left: 64px;
        }
        #dd2-ct {
            left: 256px;
        }
        .dd-item {
            height: 14px;
            border: 1px solid #a0a0a0;
            background-color: #c4d0ff;
            vertical-align: middle;
            cursor: move;
            padding: 2px;
            z-index: 1000;
            margin: 2px;
        }
        .dd-ct .dd-item {
            margin: 2px;
        }
        .dd-proxy {
            opacity: 0.4;
            -moz-opacity: 0.4;
            filter: alpha(opacity=40);
        }
        .dd-over {
            background-color: #ffff60;
        }
    </style>
    
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
    
    <script type="text/javascript">
        function getDragData(e) {
            if (!this.ddel) {
                this.ddel = document.createElement('div');
            }

            var target = Ext.get(e.getTarget());
            if (target.hasClass('dd-ct')) {
                return false;
            }
            return { ddel: this.ddel, item: target };
        }

        function onInitDrag(e) {
            this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
            this.ddel.className = this.dragData.item.dom.className;
            this.ddel.style.width = this.dragData.item.getWidth() + "px";
            this.proxy.update(this.ddel);
        }

        function getRepairXY(e, data) {
            data.item.highlight('#e8edff');
            return data.item.getXY();
        }

        function notifyDrop(dd, e, data) {
            this.el.removeClass(this.overClass);
            this.el.appendChild(data.item);
            return true;
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="ScriptManagerMain" runat="server" EnablePartialRendering="true" EnablePageMethods="true" /> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <a href="http://www.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_2">Tutorial:Advanced Custom Drag and Drop Part 2</a>
        
        <ext:DragZone ID="DragZone1" runat="server" Target="dd1-ct" Group="group" Scroll="false">
            <GetDragData Fn="getDragData" />
            <OnInitDrag Fn="onInitDrag" />
            <GetRepairXY Fn="getRepairXY" />
        </ext:DragZone>
        
        <ext:DragZone ID="DragZone2" runat="server" Target="dd2-ct" Group="group" Scroll="false">
            <GetDragData Fn="getDragData" />
            <OnInitDrag Fn="onInitDrag" />
            <GetRepairXY Fn="getRepairXY" />
        </ext:DragZone>
        
        <ext:DropTarget ID="DropTarget1" runat="server" Target="dd1-ct" Group="group" OverClass="dd-over">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
        
        <ext:DropTarget ID="DropTarget2" runat="server" Target="dd2-ct" Group="group" OverClass="dd-over">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
        
        <asp:UpdatePanel ID="evilPanel" runat="server" UpdateMode="Conditional" RenderMode="Block" >
         <Triggers>
           <asp:AsyncPostBackTrigger ControlID="BigButton"  EventName="Click" />
         </Triggers>
         <ContentTemplate>
        
        <div class="dd-ct" id="dd1-ct">
            <div class="dd-item" id="dd1-item1">Item 1.1</div>
            <div class="dd-item" id="dd1-item2">Item 1.2</div>
            <div class="dd-item" id="dd1-item3">Item 1.3</div>
        </div>
        <div class="dd-ct" id="dd2-ct">
            <div class="dd-item" id="dd2-item1">Item 2.1</div>
            <div class="dd-item" id="dd2-item2">Item 2.2</div>
            <div class="dd-item" id="dd2-item3">Item 2.3</div>
        </div>
        
        <asp:Literal ID="SomeText" runat="server" Text="Some Random Text" />
        </div>
                        
        </ContentTemplate>
        </asp:UpdatePanel>
        <asp:Button ID="BigButton" runat="server" Text="Update UpdatePanel" />
    </form>    
</body>
</html>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace CJLRDWeb.Tests
{
    public partial class DragProblem : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            if (IsPostBack)
            {
                SomeText.Text = "Bob's your uncle";
            }
        }
    }
}

**Vladimir** · Oct 24, 2011, 10:53 PM

I did not test your sample, just quick assumption

1. You drag div element outside UpdatePanel
2. Click button and the updatel panel rerender its content (with divs are defined in the markup)
3. In the browser you have two divs with same ids (firstdragged outside the update panel, second rendered by the update panel)

So, I guess you have ids conflict on the client side

**IT1333** · Oct 24, 2011, 11:04 PM

This is almost character-for-character your drag-and-drop advanced example 2. The dragging and dropping happens completely inside the UpdatePanel div. I have searched high and low and I don't see any duplicate ID's nor know how they could be created. Please note that the getDragData and the onInitDrag methods are not called.

Please have a closer look.

**Vladimir** · Oct 24, 2011, 11:16 PM

I see now, when UpdatePanel updates own content it destroys old dom elements and creates new dom elements
So, any DragZone dom references are invalid now (because UpdatePanel destroys that elements)
You have to rerender dd controls also

<%@ Page Language="C#" %>
 
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
 
<!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 id="Head1" runat="server">
    <title>Drag&amp;Drop - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    
    <script runat="server">
        protected void ReRegisterDD(object sender, EventArgs e)
        {
            DragZone1.Render();
            DragZone2.Render();
            DropTarget1.Render();
            DropTarget2.Render();
        }
    </script>
    
    
     
    <style type="text/css">
        body {
            font-size: 11px;
            font-family: arial;
        }
        .dd-ct {
            position:relative;
            border: 1px solid silver;
            width: 180px;
            height: 180px;
            background-color: #ffffc0;
        }
        #dd1-ct {
            left: 64px;
        }
        #dd2-ct {
            left: 256px;
        }
        .dd-item {
            height: 14px;
            border: 1px solid #a0a0a0;
            background-color: #c4d0ff;
            vertical-align: middle;
            cursor: move;
            padding: 2px;
            z-index: 1000;
            margin: 2px;
        }
        .dd-ct .dd-item {
            margin: 2px;
        }
        .dd-proxy {
            opacity: 0.4;
            -moz-opacity: 0.4;
            filter: alpha(opacity=40);
        }
        .dd-over {
            background-color: #ffff60;
        }
    </style>
     
    <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
     
    <script type="text/javascript">
        function getDragData(e) {
            if (!this.ddel) {
                this.ddel = document.createElement('div');
            }
 
            var target = Ext.get(e.getTarget());
            if (target.hasClass('dd-ct')) {
                return false;
            }
            return { ddel: this.ddel, item: target };
        }
 
        function onInitDrag(e) {
            this.ddel.innerHTML = this.dragData.item.dom.innerHTML;
            this.ddel.className = this.dragData.item.dom.className;
            this.ddel.style.width = this.dragData.item.getWidth() + "px";
            this.proxy.update(this.ddel);
        }
 
        function getRepairXY(e, data) {
            data.item.highlight('#e8edff');
            return data.item.getXY();
        }
 
        function notifyDrop(dd, e, data) {
            this.el.removeClass(this.overClass);
            this.el.appendChild(data.item);
            return true;
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <asp:ScriptManager ID="ScriptManagerMain" runat="server" EnablePartialRendering="true" EnablePageMethods="true" /> 
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
         
        <a href="http://www.extjs.com/learn/Tutorial:Advanced_Custom_Drag_and_Drop_Part_2">Tutorial:Advanced Custom Drag and Drop Part 2</a>
         
        <ext:DragZone ID="DragZone1" runat="server" Target="dd1-ct" Group="group" Scroll="false">
            <GetDragData Fn="getDragData" />
            <OnInitDrag Fn="onInitDrag" />
            <GetRepairXY Fn="getRepairXY" />
        </ext:DragZone>
         
        <ext:DragZone ID="DragZone2" runat="server" Target="dd2-ct" Group="group" Scroll="false">
            <GetDragData Fn="getDragData" />
            <OnInitDrag Fn="onInitDrag" />
            <GetRepairXY Fn="getRepairXY" />
        </ext:DragZone>
         
        <ext:DropTarget ID="DropTarget1" runat="server" Target="dd1-ct" Group="group" OverClass="dd-over">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
         
        <ext:DropTarget ID="DropTarget2" runat="server" Target="dd2-ct" Group="group" OverClass="dd-over">
            <NotifyDrop Fn="notifyDrop" />
        </ext:DropTarget>
         
        <asp:UpdatePanel ID="evilPanel" runat="server" UpdateMode="Conditional" RenderMode="Block" >
         <Triggers>
           <asp:AsyncPostBackTrigger ControlID="BigButton"  EventName="Click" />
         </Triggers>
         <ContentTemplate>
         
        <div class="dd-ct" id="dd1-ct">
            <div class="dd-item" id="dd1-item1">Item 1.1</div>
            <div class="dd-item" id="dd1-item2">Item 1.2</div>
            <div class="dd-item" id="dd1-item3">Item 1.3</div>
        </div>
        <div class="dd-ct" id="dd2-ct">
            <div class="dd-item" id="dd2-item1">Item 2.1</div>
            <div class="dd-item" id="dd2-item2">Item 2.2</div>
            <div class="dd-item" id="dd2-item3">Item 2.3</div>
        </div>
         
        <asp:Literal ID="SomeText" runat="server" Text="Some Random Text" />
        </div>
                         
        </ContentTemplate>
        </asp:UpdatePanel>
        <asp:Button ID="BigButton" runat="server" Text="Update UpdatePanel" OnClick="ReRegisterDD" />
    </form>    
</body>
</html>

**IT1333** · Oct 25, 2011, 7:13 PM

Ok, your solution fixed the sample code provided. That's great.

Unfortunately, it did not fix my much more complicated application code so I am still stumped. My code is similar except there is a TreePanel outside of the UpdatePanel. I cannot even start the drag after the UpdatePanel is refreshed so I know there are no duplicate ids.

Unless you have any ideas I will try to mock up a much more complicated sample in hopes that I can truly duplicate the problem.

**Daniil** · Oct 26, 2011, 10:06 AM

No ideas, it's hard to say what can be wrong. Yes, please provide a sample.

**IT1333** · Oct 27, 2011, 11:21 PM

Ok, I have attached a more complicated example. It is a cut-down version of the production code. It adds a ext TreePanel and a Menu as well as JQuery code. I suspect that one of those is where the problem lies.

You should be able to run it as is.

**Daniil** · Oct 28, 2011, 7:44 AM

When you click on the Refresh button, the BuildTree() is not executed and, respectively, this code:

mainGridDragZone.Target = mainGrid.ClientID;

When you call the .Render() for the GridDragZone it totally re-renders, i.e. re-creates, that GridDragZone and it knows nothing about its Target.

Please set up a Target before .Render().

protected void ReRegisterDropZone(object sender, EventArgs e)
{
    mainGridDragZone.Target = mainGrid.ClientID;
    mainGridDragZone.Render();
}

**IT1333** · Oct 28, 2011, 4:04 PM

That's great! It fixed my problem. Thank-you for your help.

I moved the code to OnPreRender and it works just as well there.

        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);

            // Rerender the drag controls
            if (IsPostBack)
            {
                mainGridDragZone.Target = mainGrid.ClientID;
                mainGridDragZone.Render();
            }
        }

Thread: [CLOSED] Drag does not function after postback to UpdatePanel

Thread Tools

Search Thread

Display

[CLOSED] Drag does not function after postback to UpdatePanel

Similar Threads

gridPanel (in updatePanel) disappears after partial postback

gridPanel (in updatePanel) disappears after partial postback

[CLOSED] Removing drag target from drag group.

[CLOSED] TaskManager in combination with ASP postback in a UpdatePanel

Change coolite control state while in UpdatePanel async postback

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Drag does not function after postback to UpdatePanel

[CLOSED] Drag does not function after postback to UpdatePanel

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us