TreeViewDragDrop With restriction in before drop

  1. #1

    TreeViewDragDrop With restriction in before drop

    I am trying to achieve a functionality on drag and drop in treeview. I have two Tree Panel and i nedd to drag the items from left panel to right and apply some restriction to it.

    Restrictions
    1)before drop functionality should not allow the user to add the node from right panel to left,which is already in left panel .
    2)it should only allow to copy the parent node from the right to left if the node has some child nodes
    3) On drop the node which is draged should be disabled so that it should not be added again
  2. #2
    Hi @shunilkarki,

    Welcome to the Ext.NET forums!

    We have added the "Custom Tree Drop Logic" example. It will be included into the upcoming v2.2 release, but I am posting here for you.

    Hope this helps.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Tree Custom Drop Logic - Ext.NET Examples</title>
    
        <script>
            function nodeDragOver (targetNode, position, dragData){
                var rec = dragData.records[0],
                    isFirst = targetNode.isFirst(),
                    canDropFirst = rec.get('canDropOnFirst'),
                    canDropSecond = rec.get('canDropOnSecond');
                                
                return isFirst ? canDropFirst : canDropSecond;
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <h1>Custom Tree Drop Logic</h1>
            <p>This example shows how to apply custom logic to valid dropping on nodes</p>
            <p>
                <ul>
                    <li>Child 1 can be dropped on both nodes.</li>
                    <li>Child 2 can be dropped only on the first node.</li>
                    <li>Child 3 can be dropped only on the second node.</li>
                    <li>Child 4 cannot be dropped on either node.</li>
                </ul>
            </p>
    
            <ext:Panel runat="server"
                Width="300"
                Height="200">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Bin>
                    <ext:Model runat="server" Name="Item">
                        <Fields>
                            <ext:ModelField Name="text" />
                            <ext:ModelField Name="canDropOnFirst" />
                            <ext:ModelField Name="canDropOnSecond" />
                        </Fields>
                    </ext:Model>
                </Bin>
                <Items>
                    <ext:TreePanel runat="server"
                        RootVisible="false"
                        Flex="1"
                        Title="Source">
                        <Store>
                            <ext:TreeStore runat="server" ModelName="Item">
                                <Root>
                                    <ext:Node Text="Root 1" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Child 1" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="true" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="true" />
                                                </CustomAttributes>
                                            </ext:Node>
    
                                            <ext:Node Text="Child 2" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="true" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="false" />
                                                </CustomAttributes>
                                            </ext:Node>
    
                                            <ext:Node Text="Child 3" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="false" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="true" />
                                                </CustomAttributes>
                                            </ext:Node>
    
                                            <ext:Node Text="Child 4" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="false" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="false" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreeStore>
                        </Store>
    
                        <View>
                            <ext:TreeView runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop runat="server" EnableDrag="true" EnableDrop="false" />
                                </Plugins>
                            </ext:TreeView>
                        </View>
                    </ext:TreePanel>
    
                    <ext:TreePanel runat="server"
                        RootVisible="false"
                        Flex="1"
                        Title="Destination">
                        <Store>
                            <ext:TreeStore runat="server" ModelName="Item">
                                <Root>
                                    <ext:Node Text="Root 2" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Folder 1" Expanded="true" EmptyChildren="true" />
                                            <ext:Node Text="Folder 2" Expanded="true" EmptyChildren="true" />
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreeStore>
                        </Store>
                        <View>
                            <ext:TreeView runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop runat="server" EnableDrag="false" EnableDrop="true" AppendOnly="true" />
                                </Plugins>
                            </ext:TreeView>
                        </View>
                        <Listeners>
                            <NodeDragOver Fn="nodeDragOver" />
                        </Listeners>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>    
        </form>
    </body>
    </html>
  3. #3

    code reviewed

    hi @Daniil
    I have gone through the code million times provided as an example in
    https://examples2.ext.net/#/TreePane...om_Drop_Logic/

    The code doesn't do what it says it should do.
    it says that Child 4 cannot be dropped on either node but it can be added to any node.
    So please suggest how can i implement the required restrictions
  4. #4
    I can confirm that it doesn't work with the v2.1 release, but it does with the latest Ext.NET sources from SVN and it will with the upcoming v2.2 release. It will be released very soon.
  5. #5

    what should i do then

    so in the mean time what should i do to complete the task because i need to do that by today.

    This task has been done by my senior when they were using aspx but now i need to transform it into razor and the code doesnot completed. could you look at the code i have posted and reply to me
    The code look like as follows
    http://stackoverflow.com/questions/1...ect=1#16008877
  6. #6
    You can override the isValidDropPoint function.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html>
     
    <html>
    <head runat="server">
        <title>Tree Custom Drop Logic - Ext.NET Examples</title>
     
        <script>
            function nodeDragOver (targetNode, position, dragData){
                var rec = dragData.records[0],
                    isFirst = targetNode.isFirst(),
                    canDropFirst = rec.get('canDropOnFirst'),
                    canDropSecond = rec.get('canDropOnSecond');
                                 
                return isFirst ? canDropFirst : canDropSecond;
            }
    
            var onTreeViewAfterRender = function (view) {
                view.getPlugin("dragdrop").dropZone.isValidDropPoint = myIsValidDropPoint;
            };
    
            var myIsValidDropPoint = function (node, position, dragZone, e, data) {
                if (!node || !data.item) {
                    return false;
                }
    
                var view = this.view,
                    targetNode = view.getRecord(node),
                    draggedRecords = data.records,
                    dataLength = draggedRecords.length,
                    ln = draggedRecords.length,
                    i, record;
    
    
                if (!(targetNode && position && dataLength)) {
                    return false;
                }
    
    
                for (i = 0; i < ln; i++) {
                    record = draggedRecords[i];
                    if (record.isNode && record.contains(targetNode)) {
                        return false;
                    }
                }
    
    
                if (position === 'append' && targetNode.get('allowDrop') === false) {
                    return false;
                } else if (position != 'append' && targetNode.parentNode.get('allowDrop') === false) {
                    return false;
                }
    
    
                if (Ext.Array.contains(draggedRecords, targetNode)) {
                    return false;
                }
    
                // override
                return nodeDragOver.call(this, targetNode, position, data);
                // end of the overide
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
             
            <h1>Custom Tree Drop Logic</h1>
            <p>This example shows how to apply custom logic to valid dropping on nodes</p>
            <p>
                <ul>
                    <li>Child 1 can be dropped on both nodes.</li>
                    <li>Child 2 can be dropped only on the first node.</li>
                    <li>Child 3 can be dropped only on the second node.</li>
                    <li>Child 4 cannot be dropped on either node.</li>
                </ul>
            </p>
     
            <ext:Panel runat="server"
                Width="300"
                Height="200">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Bin>
                    <ext:Model runat="server" Name="Item">
                        <Fields>
                            <ext:ModelField Name="text" />
                            <ext:ModelField Name="canDropOnFirst" />
                            <ext:ModelField Name="canDropOnSecond" />
                        </Fields>
                    </ext:Model>
                </Bin>
                <Items>
                    <ext:TreePanel runat="server"
                        RootVisible="false"
                        Flex="1"
                        Title="Source">
                        <Store>
                            <ext:TreeStore runat="server" ModelName="Item">
                                <Root>
                                    <ext:Node Text="Root 1" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Child 1" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="true" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="true" />
                                                </CustomAttributes>
                                            </ext:Node>
     
                                            <ext:Node Text="Child 2" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="true" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="false" />
                                                </CustomAttributes>
                                            </ext:Node>
     
                                            <ext:Node Text="Child 3" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="false" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="true" />
                                                </CustomAttributes>
                                            </ext:Node>
     
                                            <ext:Node Text="Child 4" Leaf="true">
                                                <CustomAttributes>
                                                    <ext:ConfigItem Name="canDropOnFirst" Value="false" />
                                                    <ext:ConfigItem Name="canDropOnSecond" Value="false" />
                                                </CustomAttributes>
                                            </ext:Node>
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreeStore>
                        </Store>
     
                        <View>
                            <ext:TreeView runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop runat="server" EnableDrag="true" EnableDrop="false" />
                                </Plugins>                            
                            </ext:TreeView>
                        </View>
                    </ext:TreePanel>
     
                    <ext:TreePanel 
                        ID="TreePanel1"
                        runat="server"
                        RootVisible="false"
                        Flex="1"
                        Title="Destination">
                        <Store>
                            <ext:TreeStore runat="server" ModelName="Item">
                                <Root>
                                    <ext:Node Text="Root 2" Expanded="true">
                                        <Children>
                                            <ext:Node Text="Folder 1" Expanded="true" EmptyChildren="true" />
                                            <ext:Node Text="Folder 2" Expanded="true" EmptyChildren="true" />
                                        </Children>
                                    </ext:Node>
                                </Root>
                            </ext:TreeStore>
                        </Store>
                        <View>
                            <ext:TreeView runat="server">
                                <Plugins>
                                    <ext:TreeViewDragDrop 
                                        PluginId="dragdrop" 
                                        runat="server" 
                                        EnableDrag="false" 
                                        EnableDrop="true" 
                                        AppendOnly="true" />
                                </Plugins>
                                <Listeners>
                                    <AfterRender Fn="onTreeViewAfterRender" Delay="1" />
                                </Listeners>
                            </ext:TreeView>
                        </View>
                    </ext:TreePanel>
                </Items>
            </ext:Panel>    
        </form>
    </body>
    </html>

Similar Threads

  1. FileUploadField Extension restriction
    By kutlu in forum 1.x Help
    Replies: 2
    Last Post: Jul 08, 2013, 10:39 AM
  2. [CLOSED] DragDrop in treepanel using TreeViewDragDrop plugin
    By pawangyanwali in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Apr 29, 2013, 4:36 AM
  3. [CLOSED] TreeViewDragDrop plugin on over event
    By Leonid_Veriga in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Dec 21, 2012, 6:39 AM
  4. Drag Drop
    By designworxz in forum 1.x Help
    Replies: 0
    Last Post: Feb 19, 2009, 11:46 PM
  5. [CLOSED] MultiSelect with drag and drop, Drop listener
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 30, 2009, 8:25 AM

Tags for this Thread

Posting Permissions