TreeGrid Drag&Drop on Leaf-Node

  1. #1

    TreeGrid Drag&Drop on Leaf-Node

    Hi,

    Is it possible to Drag&Drop a Node onto a Leaf-Node in the TreeGrid control? I've set the option AllowLeafDrop="true" but it doesn't change anything.

    If I don't set the Leaf-Nodes as Leaf="true" then dropping is possible, but the Nodes are always displayed as folders with collapse/expand arrows as if they would have children.

    Any suggestions would be greatly appreciated.

    Cheers, Martin
    Last edited by Daniil; Mar 18, 2011 at 3:39 PM. Reason: Opened
  2. #2
    Hi,

    I have tried the online example
    https://examples1.ext.net/#/TreePane...nced/TreeGrid/
    and leaves are dragged/dropped as expected.

    Well, we need more details how to reproduce the issue.
  3. #3
    In fact I've used this example for my implementation.

    Dropping any Node on a (normal) Folder-Node works fine. The problem is that you can't drop a Node on a Leaf-Node.

    It should be possible similar to this example: https://examples1.ext.net/#/TreePane...Reorder_Nodes/

    Is there a way to achieve this?
  4. #4
    Hi,

    Please see the following sample
    <%@ 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="Head2" runat="server">
        <title>TreeGrid - Ext.NET Examples</title>
        
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        
        <script type="text/javascript">
            var formatHours = function (v) {
                if (v < 1) {
                    return Math.round(v * 60) + " mins";
                } else if (Math.floor(v) !== v) {
                    var min = v - Math.floor(v);
                    return Math.floor(v) + "h " + Math.round(min * 60) + "m";
                } else {
                    return v + " hour" + (v === 1 ? "" : "s");
                }
            };
            
            var getDropPoint = function(e, n, dd){
                var tn = n.node;
                if(tn.isRoot){
                    return tn.allowChildren !== false ? "append" : false; 
                }
                var dragEl = n.ddel;
                var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
                var y = Ext.lib.Event.getPageY(e);
                var noAppend = tn.allowChildren === false;
                if(this.appendOnly || tn.parentNode.allowChildren === false){
                    return noAppend ? false : "append";
                }
                var noBelow = false;
                if(!this.allowParentInsert){
                    noBelow = tn.hasChildNodes() && tn.isExpanded();
                }
                var q = (b - t) / (noAppend ? 2 : 3);
                if(y >= t && y < (t + q)){
                    return "above";
                }else if(!noBelow && (noAppend || y >= b-q && y <= b)){
                    return "below";
                }else{
                    return "append";
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>TreeGrid</h1>
            
            <ext:TreeGrid 
                runat="server"
                Title="Core Team Projects"
                AllowLeafDrop="true"            
                EnableDD="true"
                Width="500"
                Height="300"
                NoLeafIcon="true"
                >      
                <DropConfig>
                    <CustomConfig>
                        <ext:ConfigItem Name="getDropPoint" Value="getDropPoint" Mode="Raw" />
                    </CustomConfig>
                </DropConfig>      
                <Columns>
                    <ext:TreeGridColumn Header="task" Width="230" DataIndex="task" />
                    <ext:TreeGridColumn Header="duration" Width="100" DataIndex="duration" Align="Center" SortType="AsFloat">
                        <XTemplate runat="server">
                            <Html>
                                {duration:this.formatHours}
                            </Html>
                            <Functions>
                                <ext:JFunction Name="formatHours" Fn="formatHours" />
                            </Functions>
                        </XTemplate>
                    </ext:TreeGridColumn>
                    <ext:TreeGridColumn Header="Assigned To" Width="150" DataIndex="user" />
                </Columns>
                
                <Root>
                    <ext:TreeNode Text="Tasks">
                        <Nodes>
                            <ext:TreeNode Icon="Folder" Expanded="true">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="task" Value="Project: Shopping" Mode="Value" />
                                    <ext:ConfigItem Name="duration" Value="13.25" />
                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                </CustomAttributes>
                                <Nodes>
                                    <ext:TreeNode Icon="Folder">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Housewares" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="1.25" />
                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                        </CustomAttributes>
                                        <Nodes>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Kitchen supplies" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Groceries" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.4" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Cleaning supplies" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.4" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Office supplies" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.2" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                    <ext:TreeNode Icon="Folder" Expanded="true">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Remodeling" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="12" />
                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                        </CustomAttributes>
                                        <Nodes>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Retile kitchen" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="6.5" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Icon="Folder">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Paint bedroom" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="2.75" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                                <Nodes>
                                                    <ext:TreeNode Leaf="true">
                                                        <CustomAttributes>
                                                            <ext:ConfigItem Name="task" Value="Ceiling" Mode="Value" />
                                                            <ext:ConfigItem Name="duration" Value="1.25" />
                                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                        </CustomAttributes>
                                                    </ext:TreeNode>
                                                    <ext:TreeNode Leaf="true">
                                                        <CustomAttributes>
                                                            <ext:ConfigItem Name="task" Value="Walls" Mode="Value" />
                                                            <ext:ConfigItem Name="duration" Value="1.5" />
                                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                        </CustomAttributes>
                                                    </ext:TreeNode>
                                                </Nodes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Decorate living room" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="2.75" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Fix lights" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.75" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Reattach screen door" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="2" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                            <ext:TreeNode Icon="Folder">
                                <CustomAttributes>
                                    <ext:ConfigItem Name="task" Value="Project: Testing" Mode="Value" />
                                    <ext:ConfigItem Name="duration" Value="2" />
                                    <ext:ConfigItem Name="user" Value="Core Team" Mode="Value" />
                                </CustomAttributes>
                                <Nodes>
                                    <ext:TreeNode Icon="Folder">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Mac OSX" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="0.75" />
                                            <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                        </CustomAttributes>
                                        <Nodes>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Tommy Maintz" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                    <ext:TreeNode Icon="Folder">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Windows" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="3.75" />
                                            <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                        </CustomAttributes>
                                        <Nodes>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Safari" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Internet Explorer" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="3" />
                                                    <ext:ConfigItem Name="user" Value="Darrell Meyer" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                    <ext:TreeNode Icon="Folder">
                                        <CustomAttributes>
                                            <ext:ConfigItem Name="task" Value="Linux" Mode="Value" />
                                            <ext:ConfigItem Name="duration" Value="0.5" />
                                            <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                        </CustomAttributes>
                                        <Nodes>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="FireFox" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                            <ext:TreeNode Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="task" Value="Chrome" Mode="Value" />
                                                    <ext:ConfigItem Name="duration" Value="0.25" />
                                                    <ext:ConfigItem Name="user" Value="Aaron Conran" Mode="Value" />
                                                </CustomAttributes>
                                            </ext:TreeNode>
                                        </Nodes>
                                    </ext:TreeNode>
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Root>
            </ext:TreeGrid>        
        </form>
    </body>
    </html>
  5. #5
    Also please note that if you also need to re-order nodes it needs to disable sorting.
    <ext:TreeGrid ... EnableSort="false">
    Last edited by Daniil; Mar 18, 2011 at 2:25 PM.
  6. #6
    The custom DropConfig section together with the getDropPoint JavaScript function did the trick. Maybe I'll try to simplify this function even further, but it's working great so far. Problem solved!

    Thanks guys, great support!

    Cheers, Martin
  7. #7
    Actually this was all I needed:


    function getDropPoint(e, n, dd) {
    	var tn = n.node;
    	return tn.allowChildren !== false ? "append" : false;
    }
    Shouldn't this be implemented by default on TreeNode and AsyncTreeNode? If AllowDrop = true and AllowChildren = true, then allow drop even if it's a Leaf-Node.
  8. #8
    The feature ticket has been created.
    https://extnet.lighthouseapp.com/pro...res/tickets/78

Similar Threads

  1. [CLOSED] Drag Drop problem in TreeGrid
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Aug 17, 2011, 9:22 AM
  2. [CLOSED] Not able to drag drop leaf to leaf in TreeGrid
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Aug 15, 2011, 1:47 PM
  3. Replies: 0
    Last Post: Sep 27, 2010, 12:59 PM
  4. TreePanel - Drag and drop node if condition
    By Kaido in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 7:25 AM
  5. TreePanel:Copying from one node to another node using drag and drop
    By eighty20 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 25, 2009, 7:48 AM

Tags for this Thread

Posting Permissions