[CLOSED] TreePanel Drag and Drop

  1. #1

    [CLOSED] TreePanel Drag and Drop

    There appears to be a bug when you use drag and drop and a tree panel. Click events no longer seem to fire correctly.

    I have a tree drag zone and a tree drop zone both pointing to the same treepanel. When I start to drag something, it automagically selects the node I started to drag, but apparently the click event doesn't propagate b/c I have an ajax event that's supposed to fire when a node is selected.

    Perhaps I'm doing something wrong. Please help! (c:
  2. #2

    RE: [CLOSED] TreePanel Drag and Drop

    Hi David,

    The click event fires only if mouse up event occurred immediately after mouse down. Otherwise (if you holding mouse button) the StartDarg event will be fired.

    The better way is listen SelectionChange event of tree selection model. Unfortunately, the slection model is not implemented yet (full tree support will be included into the 0.8 release)

    You can manually attach client side event (and use AjaxMethod if need to call server-side method)
    <%@ Page Language="C#" %>
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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="Head2" runat="server">
        <title></title>
        
        <script type="text/javascript">
            function init() {
                TreePanel1.getSelectionModel().on('selectionchange', function(sm, node) {
                    if (node) {
                        Label1.setText(node.text);
                    }
                    else {
                        Label1.setText('');
                    }
                });
            }   
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server">
                <Listeners>
                    <DocumentReady Handler="init();" />
                </Listeners>
            </ext:ScriptManager>
             
            <ext:TreePanel ID="TreePanel1" runat="server" DDAppendOnly="true" Width="300" Height="400" RootVisible="false" EnableDD="true">
                <Root>
                    <ext:TreeNode Text="Root">
                        <Nodes>
                            <ext:TreeNode Text="Node1"></ext:TreeNode>
                            <ext:TreeNode Text="Node2"></ext:TreeNode>
                            <ext:TreeNode Text="Node3"></ext:TreeNode>
                            <ext:TreeNode Text="Node4"></ext:TreeNode>
                            <ext:TreeNode Text="Node5"></ext:TreeNode>
                            <ext:TreeNode Text="Node6"></ext:TreeNode>
                            <ext:TreeNode Text="Node7"></ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
            </ext:TreePanel>                   
            
            <ext:Label ID="Label1" runat="server"></ext:Label>
        </form>
    </body>
    </html>

    Vladimir Shcheglov
    Sr. Developer
  3. #3

    RE: [CLOSED] TreePanel Drag and Drop



    How do I show a load mask when calling an ajax method?
  4. #4

    RE: [CLOSED] TreePanel Drag and Drop

    Hi David,

    We have added support of LoadMask for AjaxMethod. Please update from SVN
    Here is a sample:
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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></title>
        <script runat="server">
            protected void Page_Load(object sender, EventArgs e)
            {
                
            }
            
            [AjaxMethod(ShowMask = true, Msg="Loading...")]
            public void AjaxMethod1()
            {
                ScriptManager1.AddScript("alert('done');");
                System.Threading.Thread.Sleep(1000);
            }
    
            [AjaxMethod]
            public void AjaxMethod2()
            {
                ScriptManager1.AddScript("alert('done');");
                System.Threading.Thread.Sleep(1000);
            }
        </script>
    </head>
    <body style="margin: 10px;">
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Button runat="server" Text="AjaxMethod1">
                <Listeners>
                    <Click Handler="Coolite.AjaxMethods.AjaxMethod1();" />
                </Listeners>
            </ext:Button>
            
            <ext:Button runat="server" Text="AjaxMethod2">
                <Listeners>
                    <Click Handler="Coolite.AjaxMethods.AjaxMethod2({eventMask:{showMask:true, msg:'Loading...'}});" />
                </Listeners>
            </ext:Button>
            
        </form>
    </body>
    </html>

    Vladimir Shcheglov
    Sr. Developer

Similar Threads

  1. Drag Drop events in TreePanel
    By web4u in forum 2.x Help
    Replies: 0
    Last Post: Aug 08, 2012, 6:31 AM
  2. TreePanel - Drag & Drop
    By jigpatel06 in forum 1.x Help
    Replies: 0
    Last Post: Oct 19, 2010, 10:31 AM
  3. [CLOSED] [1.0] - MVC - TreePanel Drag-Drop DirectEvents
    By drkoh in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 22, 2010, 3:11 PM
  4. Drag and drop from GridPanel to TreePanel
    By jchau in forum Feature Requests
    Replies: 5
    Last Post: Jun 04, 2010, 12:02 PM
  5. [CLOSED] Drag-Drop From DataView to TreePanel
    By juanpablo.belli@huddle.com.ar in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 11, 2009, 6:46 AM

Posting Permissions