[CLOSED] Problem when adding a Tree Node from Javascript

  1. #1

    [CLOSED] Problem when adding a Tree Node from Javascript

    Dear Team:

    I have the following code.

     
    Javascript to Add New Node:
     
    addGroup: function(destination) {
                    var destSelectedNode = destination.getSelectionModel().getSelectedNode();
                    var newNode = { id: '999999', text: "Group Header" };
                    if (destSelectedNode != null) {
                        destination.getRootNode().appendChild(newNode);
                    }
                    else {
                        destination.getRootNode().appendChild(newNode);
                    }
                }
     
     
     <ext:TreePanel ID="treePanelDestination" runat="server" RootVisible="false" Title="Customized Fields"
                            UseArrows="true" AutoScroll="true" Animate="true" EnableDD="true" Mode="Local"
                            AllowLeafDrop="true" ContainerScroll="true">
    </ext:TreePanel>
     
    <ext:Button ID="Button5" runat="server" Text="G +" StyleSpec="margin-bottom:2px;">
          <Listeners>
                  <Click Handler="X.addGroup(treePanelDestination);" />
          </Listeners>
    </ext:Button>
    when i click on the button i need to add a node, the node is getting added, but the problem is, i am not able to expand the node it shows loading icon, and also i was not able to add child node for the created node(i have separate code to add child node). I am not able to select the node also. pls look into the attached image and help me on this


    Click image for larger version. 

Name:	Tree.jpg 
Views:	930 
Size:	19.5 KB 
ID:	2033
    Last edited by Daniil; Dec 15, 2010 at 9:49 AM. Reason: [CLOSED]
  2. #2
    Hi,

    I have reproduced this behavior. I'm nor sure this is a bug or a restriction like "node must have child nodes before expand". We will investigate.

    Here is a minimized sample to reproduce.

    Example
    <%@ 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 runat="server">
        <title>Coolite 0.8.X Example</title>
    
        <script type="text/javascript">
            var X = {
                addGroup: function(destination) {
                    var newNode = { id: '999999', text: "Group Header" };
                    destination.getRootNode().appendChild(newNode);
                }
            }
        
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:TreePanel 
            ID="TreePanel1" 
            runat="server" 
            AutoHeight="true" 
            RootVisible="false">
            <Root>
                <ext:TreeNode Text="Root" Expanded="true">
                    <Nodes>
                        <ext:TreeNode Text="Some node" />
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreePanel>
        <ext:Button runat="server" Text="Add">
            <Listeners>
                <Click Handler="X.addGroup(TreePanel1);" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  3. #3
    Hi again,

    Well, node type is "async" by default. So, it needs to add the nodeType option with 'node' value in node's config (or pass to appendChild instance of node: new Ext.tree.TreeNode({...}));

    Example
    <%@ 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 runat="server">
        <title>Coolite 0.8.X Example</title>
    
        <script type="text/javascript">
            var X = {
                addGroup: function(destination) {
                    var newNode = { id: 'group1', text: "Group", nodeType: "node" };
                    destination.getRootNode().appendChild(newNode);
                },
                addGroupItem: function(destination) {
                    destination.appendChild(new Ext.tree.TreeNode({ id: 'item1', text: "Item", leaf: true }));
                }            
            }
        </script>
    
    </head>
    <body>
        <form runat="server">
        <ext:ScriptManager runat="server" />
        <ext:TreePanel 
            ID="TreePanel1" 
            runat="server" 
            AutoHeight="true" 
            RootVisible="false">
            <Root>
                <ext:TreeNode Text="Root" Expanded="true">
                    <Nodes>
                        <ext:TreeNode Text="Some node" />
                    </Nodes>
                </ext:TreeNode>
            </Root>
        </ext:TreePanel>
        <ext:Button runat="server" Text="Add Group">
            <Listeners>
                <Click Handler="X.addGroup(TreePanel1);" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Add Group item">
            <Listeners>
                <Click Handler="X.addGroupItem(TreePanel1.getNodeById('group1'));" />
            </Listeners>
        </ext:Button>
        </form>
    </body>
    </html>
  4. #4

    [CLOSED]Problem when adding a Tree Node from Javascript

    Hi Daniil:

    It works fine, thanks for your support.

Similar Threads

  1. [CLOSED] Reload tree node
    By RCN in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: May 16, 2012, 8:39 PM
  2. Replies: 0
    Last Post: Dec 19, 2011, 12:11 AM
  3. Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  4. Replies: 8
    Last Post: Jan 27, 2011, 9:33 PM
  5. Adding a tree node using "Mode=Remote"
    By mattwoberts in forum 1.x Help
    Replies: 2
    Last Post: Jan 07, 2011, 3:10 PM

Posting Permissions