[CLOSED] I need to get the node id on a drop event

  1. #1

    [CLOSED] I need to get the node id on a drop event

    I have two tree panels with drag and drop features. Now I want to get the id of node which I dragged and dropped to another tree from the server side I used the code below. on a itemclick event it shows the correct id of the node. now i m having problem with drop event it doesnt pass the correct id please help me


    <ext:TreePanel
                    ID="tpDistributionGroup"
                    runat="server"
                    Title="Beneficiary Groups"
                    Icon="Anchor"
                    Width="250"
                    MinHeight="700"
                    RootVisible="false"
                    BodyPaddingSummary="0 0 0 10">
                    <View>
                        <ext:TreeView runat="server">
                            <Plugins>
                                <ext:TreeViewDragDrop runat="server" EnableDrop="True" EnableDrag="False" />
                            </Plugins>
                            <DirectEvents>
                                <Drop OnEvent="NodeDragOverEvent">
                                    <ExtraParams>
                                        <ext:Parameter Mode="Raw" Value="node.id" Name="NodeId">
                                        </ext:Parameter>
                                    </ExtraParams>
                                    <EventMask ShowMask="true"></EventMask>
                                </Drop>
                            </DirectEvents>
                        </ext:TreeView>
                    </View>
                    <DirectEvents>
                        <ItemClick OnEvent="NodeDragOverEvent">
                            <ExtraParams>
                                <ext:Parameter Name="NodeId" Value="record.data.id" Mode="Raw" />
                            </ExtraParams>
                        </ItemClick>
                    </DirectEvents>
                    <Tools>
                        <ext:Tool Type="Refresh" Handler="refreshTree(#{tpDistributionGroup});">
                            <ToolTips>
                                <ext:ToolTip runat="server" Html="Refresh" />
                            </ToolTips>
                        </ext:Tool>
                    </Tools>
                </ext:TreePanel>

    Thank you in advance
    Last edited by Daniil; Jul 16, 2013 at 4:13 AM. Reason: [CLOSED]
  2. #2
    Hello!

    Please, investigate the following sample. If you continue experiencing this problem provide your sample to reproduce:

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                SiteMapNode siteNode = SiteMap.RootNode;
                Node root = new Node();
                root.NodeID = "root";
                root.Text = "Root";
                root.AllowDrag = true;
                root.Expanded = true;
                
                for (int i = 0; i < 10; i++)
                {
                    Node node = new Node();
                    node.NodeID = "node" + i;
                    node.Text = "Node " + i;
                    node.Leaf = true;
                    
                    root.Children.Add(node);
                }
                
                TreePanel1.Root.Add(root);
            }
        }
        
        protected void NodeDragOverEvent(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Node Id", e.ExtraParams["NodeId"]).Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" InitScriptMode="Linked" SourceFormatting="True" />
           
             <div class="tree">
                <ext:TreePanel 
                    ID="TreePanel1"
                    runat="server" 
                    Border="false"
                    Height="300"
                    Width="250"
                    UseArrows="true"
                    Animate="true">
                    <Store>
                        <ext:TreeStore 
                            runat="server" 
                            FolderSort="true">
                            <Sorters>
                                <ext:DataSorter Property="text" />
                            </Sorters>
                        </ext:TreeStore>
                    </Store>                
                    <View>
                        <ext:TreeView runat="server">
                           <Plugins>
                                <ext:TreeViewDragDrop runat="server" AppendOnly="true" />
                            </Plugins>
                        </ext:TreeView>
                    </View>
                </ext:TreePanel>
            </div>
            
            <div class="tree">
                <ext:TreePanel 
                    ID="TreePanel2"
                    runat="server" 
                    Height="300"
                    Width="250"
                    Border="false"
                    UseArrows="true"
                    AutoScroll="true">
                    <Store>
                        <ext:TreeStore 
                            runat="server" 
                            FolderSort="true">
                            <Sorters>
                                <ext:DataSorter Property="text" />
                            </Sorters>
                        </ext:TreeStore>
                    </Store>
                    <View>
                        <ext:TreeView runat="server">
                           <Plugins>
                                <ext:TreeViewDragDrop runat="server" AppendOnly="true" />
                            </Plugins>
                            <DirectEvents>
                                <Drop OnEvent="NodeDragOverEvent">
                                    <ExtraParams>
                                        <ext:Parameter Mode="Raw" Value="data.records[0].data.id" Name="NodeId">
                                        </ext:Parameter>
                                    </ExtraParams>
                                    <EventMask ShowMask="true"></EventMask>
                                </Drop>
                            </DirectEvents>
                        </ext:TreeView>
                    </View>
                    <Root>
                        <ext:Node Text="My Files" Icon="Folder" Expanded="true" />
                    </Root>
                </ext:TreePanel>
            </div>
        </form>
    </body>
    </html>
  3. #3

    Thank you it is working you can Close the thread

    Thank you Baidaly
    it is working and how do i know the destination parent id of the node with the same event

    Thank you again
    Last edited by amida; Jul 07, 2013 at 8:18 AM.
  4. #4
    [QUOTE=amida;112775]Thank you Baidaly
    it is working and how do i know the destination parent id of the node with the same event

    Thank you again
    Last edited by amida; Jul 07, 2013 at 8:18 AM.
  5. #5
    [QUOTE=amida;112778]
    Quote Originally Posted by amida View Post
    Thank you Baidaly
    it is working and how do i know the destination parent id of the node with the same event

    Thank you again
    Sorry, can you clarify your question?
  6. #6
    I guess you need this Parameter.
    <ext:Parameter Name="destinationNodeId" Value="overModel.getId()" Mode="Raw" />
    Please see this article to see all the available parameters.
    http://docs.sencha.com/extjs/4.2.1/#...rop-event-drop

Similar Threads

  1. TreePanel - Node Expanded Event?
    By KevinWinter in forum 2.x Help
    Replies: 0
    Last Post: Mar 04, 2013, 11:03 AM
  2. [CLOSED] [1.0] Drag Drop on TreePanel - Get reference to Target node
    By danielg in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 14, 2011, 11:29 AM
  3. TreePanel - Drag and drop node if condition
    By Kaido in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 7:25 AM
  4. 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