Add tree node via javascript from child window

**cicaglisa** · Apr 11, 2013, 8:42 AM

Ok this is the code for Default.aspx (which is the parent page in our test case)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Setup.aspx.cs" Inherits="Setup_Setup" %>


<%@ 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="Head1" runat="server">
    <title>Setup</title>
    <script type="text/javascript">
        var getTreeNodes = function (tree, nodes, parentId, nodeName, nodeId, isFolder, toAdd) {
            try {
                var length = nodes.length;
                var element = null;
                for (var i = 0; i < length; i++) {
                    element = nodes[i];


                    if (element && element.id) {
                        if (toAdd) {
                            if (parentId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //add new node under parent
                                    nodes[i].appendChild(new parent.Ext.tree.TreeNode({ text: nodeName, iconCls: isFolder ? "icon-folder" : "icon-page", id: nodeId, leaf: !isFolder, expanded: false, editable: false, allowChildren: false, "sortIndex": nodeName }));
                                    break;
                                }
                            }
                        } else {
                            if (nodeId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //remove node
                                    tree.removeNode(nodes[i]);
                                    break;
                                }
                            }
                        }


                        if (element.childNodes) {
                            getTreeNodes(tree, element.childNodes, parentId, nodeName, nodeId, isFolder, toAdd);
                        }
                    }
                }
            } catch (ex) {
                console.error(ex);
            }
        };


        var createNewNode = function () {
            if (opener.treeMainWindow) {
                getTreeNodes(opener.treeMainWindow, opener.treeMainWindow.root.childNodes, 1, 'new node test', '123456', false, true);
            } else {
                console.log('Tree not found!');
            }
        };
    </script>
</head>
<body style="background-color:#DFE8F6">
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="internalResourceManager" runat="server"  />
        <ext:Viewport ID="Viewport1" runat="server" AutoScroll="false">
            <Items>
                <ext:Panel ID="pnlTrees" runat="server" Collapsible="true" Region="West" Split="true"
                    Title="" Width="250" AutoHeight="True" Layout="Fit" BodyStyle="background-color:#DFE8F6;background-image:none;">
                    <Items>
                        <ext:TreePanel ID="tree" ClientIDMode="Static" Icon="Vcard"  Height="550"
                            AutoScroll="true" UseArrows="true" Lines="false" runat="server" Region="West"
                            Margins="3 0 3 3" CMargins="3 3 3 3" MinWidth="150" Split="true" Visible="true"
                            Border="false">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server" Layout="hbox">
                                    <Items>
                                        <ext:Button runat="server" Text="Add New node">
                                            <Listeners>
                                                <Click Handler="createNewNode('Setup.aspx');" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:TreePanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

and this is Default.aspx.cs code to keep the tree generation code separate which is not causing issues at all:

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using Ext.Net;


public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        treeMainWindow.Width = Unit.Pixel(300);
        treeMainWindow.Height = Unit.Pixel(450);
        treeMainWindow.Icon = Icon.BookOpen;
        treeMainWindow.Title = "Catalog";
        treeMainWindow.AutoScroll = true;


        Ext.Net.TreeNode root = new Ext.Net.TreeNode("Composers");
        root.Expanded = true;
        treeMainWindow.Root.Add(root);


        List<Composer> composers = this.GetData();


        int index = 1;
        foreach (Composer composer in composers)
        {
            Ext.Net.TreeNode composerNode = new Ext.Net.TreeNode(index.ToString(), composer.Name, Icon.UserGray);
            root.Nodes.Add(composerNode);


            foreach (Composition composition in composer.Compositions)
            {
                Ext.Net.TreeNode compositionNode = new Ext.Net.TreeNode(index.ToString(), "random" + index.ToString(), Icon.Add);
                composerNode.Nodes.Add(compositionNode);


                foreach (Piece piece in composition.Pieces)
                {
                    Ext.Net.TreeNode pieceNode = new Ext.Net.TreeNode(index.ToString(), piece.Title, Icon.Music);
                    compositionNode.Nodes.Add(pieceNode);


                    index++;
                }


                index++;
            }


            index++;
        }
    }


    public class Composer
    {
        public Composer(string name) { this.Name = name; }
        public string Name { get; set; }


        private List<Composition> compositions;
        public List<Composition> Compositions
        {
            get
            {
                if (this.compositions == null)
                {
                    this.compositions = new List<Composition>();
                }
                return this.compositions;
            }
        }
    }


    public class Composition
    {
        public Composition() { }


        public Composition(CompositionType type)
        {
            this.Type = type;
        }


        public CompositionType Type { get; set; }


        private List<Piece> pieces;
        public List<Piece> Pieces
        {
            get
            {
                if (this.pieces == null)
                {
                    this.pieces = new List<Piece>();
                }
                return this.pieces;
            }
        }
    }


    public class Piece
    {
        public Piece() { }


        public Piece(string title)
        {
            this.Title = title;
        }


        public string Title { get; set; }
    }


    public enum CompositionType
    {
        Concertos,
        Quartets,
        Sonatas,
        Symphonies
    }


    public List<Composer> GetData()
    {
        Composer beethoven = new Composer("Beethoven");


        Composition beethovenConcertos = new Composition(CompositionType.Concertos);
        Composition beethovenQuartets = new Composition(CompositionType.Quartets);
        Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
        Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);


        beethovenConcertos.Pieces.AddRange(new List<Piece> { 
            new Piece{ Title = "No. 1 - C" },
            new Piece{ Title = "No. 2 - B-Flat Major" },
            new Piece{ Title = "No. 3 - C Minor" }
        });


        beethovenQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Six String Quartets" },
            new Piece{ Title = "Three String Quartets" },
            new Piece{ Title = "Grosse Fugue for String Quartets" }
        });


        beethovenSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Sonata in A Minor" },
            new Piece{ Title = "sonata in F Major" }
        });


        beethovenSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Major" },
            new Piece{ Title = "No. 2 - D Major" }
        });


        beethoven.Compositions.AddRange(new List<Composition>{
            beethovenConcertos, 
            beethovenQuartets,
            beethovenSonatas,
            beethovenSymphonies 
        });
        
        Composer mozart = new Composer("Mozart");


        Composition mozartConcertos = new Composition(CompositionType.Concertos);


        mozartConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Concerto No. 12" },
            new Piece{ Title = "Piano Concerto No. 17" },
            new Piece{ Title = "Clarinet Concerto" },
            new Piece{ Title = "Violin Concerto No. 5" },
            new Piece{ Title = "Violin Concerto No. 4" }
        });


        mozart.Compositions.Add(mozartConcertos);


        return new List<Composer> { beethoven, mozart };
    }
}

Next one is our child window that is been open by the parent it's called Setup.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Setup.aspx.cs" Inherits="Setup_Setup" %>


<%@ 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="Head1" runat="server">
    <title>Setup</title>
    <script type="text/javascript">
        var getTreeNodes = function (tree, nodes, parentId, nodeName, nodeId, isFolder, toAdd) {
            try {
                var length = nodes.length;
                var element = null;
                for (var i = 0; i < length; i++) {
                    element = nodes[i];


                    if (element && element.id) {
                        if (toAdd) {
                            if (parentId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //add new node under parent
                                    nodes[i].appendChild(new parent.Ext.tree.TreeNode({ text: nodeName, iconCls: isFolder ? "icon-folder" : "icon-page", id: nodeId, leaf: !isFolder, expanded: false, editable: false, allowChildren: false, "sortIndex": nodeName }));
                                    break;
                                }
                            }
                        } else {
                            if (nodeId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //remove node
                                    tree.removeNode(nodes[i]);
                                    break;
                                }
                            }
                        }


                        if (element.childNodes) {
                            getTreeNodes(tree, element.childNodes, parentId, nodeName, nodeId, isFolder, toAdd);
                        }
                    }
                }
            } catch (ex) {
                console.error(ex);
            }
        };


        var createNewNode = function () {
            if (opener.treeMainWindow) {
                getTreeNodes(opener.treeMainWindow, opener.treeMainWindow.root.childNodes, 1, 'new node test', '123456', false, true);
            } else {
                console.log('Tree not found!');
            }
        };
    </script>
</head>
<body style="background-color:#DFE8F6">
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="internalResourceManager" runat="server"  />
        <ext:Viewport ID="Viewport1" runat="server" AutoScroll="false">
            <Items>
                <ext:Panel ID="pnlTrees" runat="server" Collapsible="true" Region="West" Split="true"
                    Title="" Width="250" AutoHeight="True" Layout="Fit" BodyStyle="background-color:#DFE8F6;background-image:none;">
                    <Items>
                        <ext:TreePanel ID="tree" ClientIDMode="Static" Icon="Vcard"  Height="550"
                            AutoScroll="true" UseArrows="true" Lines="false" runat="server" Region="West"
                            Margins="3 0 3 3" CMargins="3 3 3 3" MinWidth="150" Split="true" Visible="true"
                            Border="false">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server" Layout="hbox">
                                    <Items>
                                        <ext:Button runat="server" Text="Add New node">
                                            <Listeners>
                                                <Click Handler="createNewNode('Setup/Setup.aspx');" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:TreePanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

and the last part is Setup.aspx.cs code which simply generates the same tree as the one in default.aspx page:

using System;
using System.Collections.Generic;
using System.Web.UI.WebControls;
using Ext.Net;


public partial class Setup_Setup : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        tree.ID = "TreePanel1";
        tree.Width = Unit.Pixel(300);
        tree.Height = Unit.Pixel(450);
        tree.Icon = Icon.BookOpen;
        tree.Title = "Catalog";
        tree.AutoScroll = true;


        StatusBar statusBar = new StatusBar();
        statusBar.AutoClear = 1000;
        tree.BottomBar.Add(statusBar);


        tree.Listeners.Click.Handler = statusBar.ClientID + ".setStatus({text: 'Node Selected: <b>' + node.text + '</b>', clear: true});";
        tree.Listeners.ExpandNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + node.text + '</b>', clear: true});";
        tree.Listeners.ExpandNode.Delay = 30;
        tree.Listeners.CollapseNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + node.text + '</b>', clear: true});";


        Ext.Net.TreeNode root = new Ext.Net.TreeNode("Composers");
        root.Expanded = true;
        tree.Root.Add(root);


        List<Composer> composers = this.GetData();


        foreach (Composer composer in composers)
        {
            Ext.Net.TreeNode composerNode = new Ext.Net.TreeNode(composer.Name, Icon.UserGray);
            root.Nodes.Add(composerNode);


            foreach (Composition composition in composer.Compositions)
            {
                Ext.Net.TreeNode compositionNode = new Ext.Net.TreeNode(composition.Type.ToString());
                composerNode.Nodes.Add(compositionNode);


                foreach (Piece piece in composition.Pieces)
                {
                    Ext.Net.TreeNode pieceNode = new Ext.Net.TreeNode(piece.Title, Icon.Music);
                    compositionNode.Nodes.Add(pieceNode);
                }
            }
        }
    }


    public class Composer
    {
        public Composer(string name) { this.Name = name; }
        public string Name { get; set; }


        private List<Composition> compositions;
        public List<Composition> Compositions
        {
            get
            {
                if (this.compositions == null)
                {
                    this.compositions = new List<Composition>();
                }
                return this.compositions;
            }
        }
    }


    public class Composition
    {
        public Composition() { }


        public Composition(CompositionType type)
        {
            this.Type = type;
        }


        public CompositionType Type { get; set; }


        private List<Piece> pieces;
        public List<Piece> Pieces
        {
            get
            {
                if (this.pieces == null)
                {
                    this.pieces = new List<Piece>();
                }
                return this.pieces;
            }
        }
    }


    public class Piece
    {
        public Piece() { }


        public Piece(string title)
        {
            this.Title = title;
        }


        public string Title { get; set; }
    }


    public enum CompositionType
    {
        Concertos,
        Quartets,
        Sonatas,
        Symphonies
    }


    public List<Composer> GetData()
    {
        Composer beethoven = new Composer("Beethoven");


        Composition beethovenConcertos = new Composition(CompositionType.Concertos);
        Composition beethovenQuartets = new Composition(CompositionType.Quartets);
        Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
        Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);


        beethovenConcertos.Pieces.AddRange(new List<Piece> { 
            new Piece{ Title = "No. 1 - C" },
            new Piece{ Title = "No. 2 - B-Flat Major" },
            new Piece{ Title = "No. 3 - C Minor" }
        });


        beethovenQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Six String Quartets" },
            new Piece{ Title = "Three String Quartets" },
            new Piece{ Title = "Grosse Fugue for String Quartets" }
        });


        beethovenSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Sonata in A Minor" },
            new Piece{ Title = "sonata in F Major" }
        });


        beethovenSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Major" },
            new Piece{ Title = "No. 2 - D Major" }
        });


        beethoven.Compositions.AddRange(new List<Composition>{
            beethovenConcertos, 
            beethovenQuartets,
            beethovenSonatas,
            beethovenSymphonies 
        });


        Composer mozart = new Composer("Mozart");


        Composition mozartConcertos = new Composition(CompositionType.Concertos);


        mozartConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Concerto No. 12" },
            new Piece{ Title = "Piano Concerto No. 17" },
            new Piece{ Title = "Clarinet Concerto" },
            new Piece{ Title = "Violin Concerto No. 5" },
            new Piece{ Title = "Violin Concerto No. 4" }
        });


        mozart.Compositions.Add(mozartConcertos);


        return new List<Composer> { beethoven, mozart };
    }
}

Javascript is included in each aspx page so there are no other external files used.

Thanks

**Daniil** · Apr 12, 2013, 11:36 AM

Thank you. Placing code behind direct to an ASPX page wrapping in

<script runat="server">
     ...
</script>

and leaving just

<%@ Page Language="C#" %>

would make the things even easier for us. This way we could just copy/past the pages and run without creating/renaming files.

Though, more important, that the sample throws the following for me.

Compiler Error Message: CS0103: The name 'treeMainWindow' does not exist in the current context
Line 6:          treeMainWindow.Width = Unit.Pixel(300);

**cicaglisa** · Apr 12, 2013, 11:59 AM

Ok this is the updated version with C# code included in the aspx page.

MainPage:

<%@ 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="Head1" runat="server">
    <title>Multi Node TreePanel built from code-behind - Ext.NET Examples</title>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            treeMainWindow.Width = Unit.Pixel(300);
            treeMainWindow.Height = Unit.Pixel(450);
            treeMainWindow.Icon = Icon.BookOpen;
            treeMainWindow.Title = "Catalog";
            treeMainWindow.AutoScroll = true;


            Ext.Net.TreeNode root = new Ext.Net.TreeNode("Composers");
            root.Expanded = true;
            treeMainWindow.Root.Add(root);


            List<Composer> composers = this.GetData();


            int index = 1;
            foreach (Composer composer in composers)
            {
                Ext.Net.TreeNode composerNode = new Ext.Net.TreeNode(index.ToString(), composer.Name, Icon.UserGray);
                root.Nodes.Add(composerNode);


                foreach (Composition composition in composer.Compositions)
                {
                    Ext.Net.TreeNode compositionNode = new Ext.Net.TreeNode(index.ToString(), "random" + index.ToString(), Icon.Add);
                    composerNode.Nodes.Add(compositionNode);


                    foreach (Piece piece in composition.Pieces)
                    {
                        Ext.Net.TreeNode pieceNode = new Ext.Net.TreeNode(index.ToString(), piece.Title, Icon.Music);
                        compositionNode.Nodes.Add(pieceNode);


                        index++;
                    }


                    index++;
                }


                index++;
            }
        }


        public class Composer
        {
            public Composer(string name) { this.Name = name; }
            public string Name { get; set; }


            private List<Composition> compositions;
            public List<Composition> Compositions
            {
                get
                {
                    if (this.compositions == null)
                    {
                        this.compositions = new List<Composition>();
                    }
                    return this.compositions;
                }
            }
        }


        public class Composition
        {
            public Composition() { }


            public Composition(CompositionType type)
            {
                this.Type = type;
            }


            public CompositionType Type { get; set; }


            private List<Piece> pieces;
            public List<Piece> Pieces
            {
                get
                {
                    if (this.pieces == null)
                    {
                        this.pieces = new List<Piece>();
                    }
                    return this.pieces;
                }
            }
        }


        public class Piece
        {
            public Piece() { }


            public Piece(string title)
            {
                this.Title = title;
            }


            public string Title { get; set; }
        }


        public enum CompositionType
        {
            Concertos,
            Quartets,
            Sonatas,
            Symphonies
        }


        public List<Composer> GetData()
        {
            Composer beethoven = new Composer("Beethoven");


            Composition beethovenConcertos = new Composition(CompositionType.Concertos);
            Composition beethovenQuartets = new Composition(CompositionType.Quartets);
            Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
            Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);


            beethovenConcertos.Pieces.AddRange(new List<Piece> { 
            new Piece{ Title = "No. 1 - C" },
            new Piece{ Title = "No. 2 - B-Flat Major" },
            new Piece{ Title = "No. 3 - C Minor" }
        });


            beethovenQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Six String Quartets" },
            new Piece{ Title = "Three String Quartets" },
            new Piece{ Title = "Grosse Fugue for String Quartets" }
        });


            beethovenSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Sonata in A Minor" },
            new Piece{ Title = "sonata in F Major" }
        });


            beethovenSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Major" },
            new Piece{ Title = "No. 2 - D Major" }
        });


            beethoven.Compositions.AddRange(new List<Composition>{
            beethovenConcertos, 
            beethovenQuartets,
            beethovenSonatas,
            beethovenSymphonies 
        });


            Composer mozart = new Composer("Mozart");


            Composition mozartConcertos = new Composition(CompositionType.Concertos);


            mozartConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Concerto No. 12" },
            new Piece{ Title = "Piano Concerto No. 17" },
            new Piece{ Title = "Clarinet Concerto" },
            new Piece{ Title = "Violin Concerto No. 5" },
            new Piece{ Title = "Violin Concerto No. 4" }
        });


            mozart.Compositions.Add(mozartConcertos);


            return new List<Composer> { beethoven, mozart };
        }
    </script>


    <script type="text/javascript">
        function open_win(url) {
            var setup = window.open(url, 'setup', 'width=980,height=800,resizable=no');
            setup.focus();
            setup.onresize = function () {
                setup.resizeTo(980, 800);
            };
            setup.onclick = function () {
                setup.resizeTo(980, 800);
            };
        };
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <h1>Multi Node TreePanel Built From Code-Behind</h1>


        <ext:TreePanel ID="treeMainWindow" ClientIDMode="Static" Icon="Vcard"  Height="550"
                            AutoScroll="true" UseArrows="true" Lines="false" runat="server" Region="West"
                            Margins="3 0 3 3" CMargins="3 3 3 3" MinWidth="150" Split="true" Visible="true"
                            Border="false">
        </ext:TreePanel>
        
        <ext:Button ID="btnSetupModule" runat="server" Icon="Wrench" Text="Setup">
            <Listeners>
                <Click Handler="open_win('Setup.aspx');" />
            </Listeners>
            <ToolTips>
                <ext:ToolTip ID="ToolTip2" runat="server" Html="Open Setup Window" />
            </ToolTips>
        </ext:Button>
    </form>
</body>
</html>

Child page:

<%@ 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="Head1" runat="server">
    <title>Setup</title>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            tree.Width = Unit.Pixel(300);
            tree.Height = Unit.Pixel(450);
            tree.Icon = Icon.BookOpen;
            tree.Title = "Catalog";
            tree.AutoScroll = true;


            StatusBar statusBar = new StatusBar();
            statusBar.AutoClear = 1000;
            tree.BottomBar.Add(statusBar);


            tree.Listeners.Click.Handler = statusBar.ClientID + ".setStatus({text: 'Node Selected: <b>' + node.text + '</b>', clear: true});";
            tree.Listeners.ExpandNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Expanded: <b>' + node.text + '</b>', clear: true});";
            tree.Listeners.ExpandNode.Delay = 30;
            tree.Listeners.CollapseNode.Handler = statusBar.ClientID + ".setStatus({text: 'Node Collapsed: <b>' + node.text + '</b>', clear: true});";


            Ext.Net.TreeNode root = new Ext.Net.TreeNode("Composers");
            root.Expanded = true;
            tree.Root.Add(root);


            List<Composer> composers = this.GetData();


            foreach (Composer composer in composers)
            {
                Ext.Net.TreeNode composerNode = new Ext.Net.TreeNode(composer.Name, Icon.UserGray);
                root.Nodes.Add(composerNode);


                foreach (Composition composition in composer.Compositions)
                {
                    Ext.Net.TreeNode compositionNode = new Ext.Net.TreeNode(composition.Type.ToString());
                    composerNode.Nodes.Add(compositionNode);


                    foreach (Piece piece in composition.Pieces)
                    {
                        Ext.Net.TreeNode pieceNode = new Ext.Net.TreeNode(piece.Title, Icon.Music);
                        compositionNode.Nodes.Add(pieceNode);
                    }
                }
            }
        }


        public class Composer
        {
            public Composer(string name) { this.Name = name; }
            public string Name { get; set; }


            private List<Composition> compositions;
            public List<Composition> Compositions
            {
                get
                {
                    if (this.compositions == null)
                    {
                        this.compositions = new List<Composition>();
                    }
                    return this.compositions;
                }
            }
        }


        public class Composition
        {
            public Composition() { }


            public Composition(CompositionType type)
            {
                this.Type = type;
            }


            public CompositionType Type { get; set; }


            private List<Piece> pieces;
            public List<Piece> Pieces
            {
                get
                {
                    if (this.pieces == null)
                    {
                        this.pieces = new List<Piece>();
                    }
                    return this.pieces;
                }
            }
        }


        public class Piece
        {
            public Piece() { }


            public Piece(string title)
            {
                this.Title = title;
            }


            public string Title { get; set; }
        }


        public enum CompositionType
        {
            Concertos,
            Quartets,
            Sonatas,
            Symphonies
        }


        public List<Composer> GetData()
        {
            Composer beethoven = new Composer("Beethoven");


            Composition beethovenConcertos = new Composition(CompositionType.Concertos);
            Composition beethovenQuartets = new Composition(CompositionType.Quartets);
            Composition beethovenSonatas = new Composition(CompositionType.Sonatas);
            Composition beethovenSymphonies = new Composition(CompositionType.Symphonies);


            beethovenConcertos.Pieces.AddRange(new List<Piece> { 
            new Piece{ Title = "No. 1 - C" },
            new Piece{ Title = "No. 2 - B-Flat Major" },
            new Piece{ Title = "No. 3 - C Minor" }
        });


            beethovenQuartets.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Six String Quartets" },
            new Piece{ Title = "Three String Quartets" },
            new Piece{ Title = "Grosse Fugue for String Quartets" }
        });


            beethovenSonatas.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Sonata in A Minor" },
            new Piece{ Title = "sonata in F Major" }
        });


            beethovenSymphonies.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "No. 1 - C Major" },
            new Piece{ Title = "No. 2 - D Major" }
        });


            beethoven.Compositions.AddRange(new List<Composition>{
            beethovenConcertos, 
            beethovenQuartets,
            beethovenSonatas,
            beethovenSymphonies 
        });


            Composer mozart = new Composer("Mozart");


            Composition mozartConcertos = new Composition(CompositionType.Concertos);


            mozartConcertos.Pieces.AddRange(new List<Piece> {
            new Piece{ Title = "Piano Concerto No. 12" },
            new Piece{ Title = "Piano Concerto No. 17" },
            new Piece{ Title = "Clarinet Concerto" },
            new Piece{ Title = "Violin Concerto No. 5" },
            new Piece{ Title = "Violin Concerto No. 4" }
        });


            mozart.Compositions.Add(mozartConcertos);


            return new List<Composer> { beethoven, mozart };
        }
    </script>


    <script type="text/javascript">
        var getTreeNodes = function (tree, nodes, parentId, nodeName, nodeId, isFolder, toAdd) {
            try {
                var length = nodes.length;
                var element = null;
                for (var i = 0; i < length; i++) {
                    element = nodes[i];


                    if (element && element.id) {
                        if (toAdd) {
                            if (parentId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //add new node under parent
                                    nodes[i].appendChild(new parent.Ext.tree.TreeNode({ text: nodeName, iconCls: isFolder ? "icon-folder" : "icon-page", id: nodeId, leaf: !isFolder, expanded: false, editable: false, allowChildren: false, "sortIndex": nodeName }));
                                    break;
                                }
                            }
                        } else {
                            if (nodeId == parseInt(element.id, 10)) {
                                if (nodes[i]) { //remove node
                                    tree.removeNode(nodes[i]);
                                    break;
                                }
                            }
                        }


                        if (element.childNodes) {
                            getTreeNodes(tree, element.childNodes, parentId, nodeName, nodeId, isFolder, toAdd);
                        }
                    }
                }
            } catch (ex) {
                console.error(ex);
            }
        };


        var createNewNode = function () {
            if (opener.treeMainWindow) {
                getTreeNodes(opener.treeMainWindow, opener.treeMainWindow.root.childNodes, 1, 'new node test', '123456', false, true);
            } else {
                console.log('Tree not found!');
            }
        };
    </script>
</head>
<body style="background-color:#DFE8F6">
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="internalResourceManager" runat="server"  />
        <ext:Viewport ID="Viewport1" runat="server" AutoScroll="false">
            <Items>
                <ext:Panel ID="pnlTrees" runat="server" Collapsible="true" Region="West" Split="true"
                    Title="" Width="250" AutoHeight="True" Layout="Fit" BodyStyle="background-color:#DFE8F6;background-image:none;">
                    <Items>
                        <ext:TreePanel ID="tree" ClientIDMode="Static" Icon="Vcard"  Height="550"
                            AutoScroll="true" UseArrows="true" Lines="false" runat="server" Region="West"
                            Margins="3 0 3 3" CMargins="3 3 3 3" MinWidth="150" Split="true" Visible="true"
                            Border="false">
                            <TopBar>
                                <ext:Toolbar ID="Toolbar2" runat="server" Layout="hbox">
                                    <Items>
                                        <ext:Button runat="server" Text="Add New node">
                                            <Listeners>
                                                <Click Handler="createNewNode('Setup/Setup.aspx');" />
                                            </Listeners>
                                        </ext:Button>
                                    </Items>
                                </ext:Toolbar>
                            </TopBar>
                        </ext:TreePanel>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Viewport>
    </div>
    </form>
</body>
</html>

I've tested the current code in all 3 browsers IE, Chrome and Firefox I don't have any errors just the one when adding child node on IE.

**Daniil** · Apr 12, 2013, 12:40 PM

Thank you, I get it runnable.

I can't reproduce the issue with IE9. What is your IE version?

**cicaglisa** · Apr 12, 2013, 12:58 PM

Hi Daniil,

It breaks only on IE 7 and 8.

**cicaglisa** · Apr 15, 2013, 10:04 AM

Hi Daniil,

have you manage to reproduce it on IE 7 or 8?

**Daniil** · Apr 16, 2013, 11:57 AM

Unfortunately, I have no original IE7 or IE8. Tried with IE9 in IE8 mode, but it is not reproducible.

IETester doesn't behave well with your sample.

I could test with a browserstack account, but I need your example online. Could you share, please?

**cicaglisa** · Apr 16, 2013, 1:27 PM

Hi Daniil,

this is the external website you can use to test with different versions of IE:

http://31.222.130.122/ParentChild/

Thanks

**Daniil** · Apr 17, 2013, 12:01 PM

Thank you.

I discovered a weird thing.

I have tweaked a bit your sample replacing:

function open_win(url) {
    var setup = window.open(url, 'setup', 'width=980,height=800,resizable=no');
    setup.focus();
    setup.onresize = function () {
        setup.resizeTo(980, 800);
    };
    setup.onclick = function () {
        setup.resizeTo(980, 800);
    };
};

with

function open_win(url) {
    var setup = window.open(url, 'setup', 'width=400,height=300,resizable=no');
    setup.focus();
    setup.onresize = function () {
        setup.resizeTo(400, 300);
    };
    setup.onclick = function () {
        setup.resizeTo(400, 300);
    };
};

I.e. just made a window is bit smaller to get it more comfortable to test with.

And it somehow helps remedy the problem. I tested it about 5 times.

So, could you test it as well?

===

Some important note.

'123456' is a node's id. Please start an id with a letter and ensure there are no nodes in a tree with the same id.

Ignoring these rules can lead to very weird issues which very hard to catch.

**cicaglisa** · Apr 17, 2013, 12:59 PM

Hi Daniil,

I changed the node to start with node + id just to make sure that's not going to cause issues with the sample code.

After updating the method with smaller setup window size I still get the same error :(

It doesn't solve my issue unfortunately. This is the screenshot after the execution of the updated code:

Click image for larger version.

Name: JS_error.png
Views: 20
Size: 54.2 KB
ID: 6042

Any other ideas, what else could I try?

Thanks!

Thread: Add tree node via javascript from child window

Thread Tools

Search Thread

Display

Similar Threads

How to disable auto expand tree node when using dynamic tree?

How to Check All child node when the root node is checked

[CLOSED] We are trying to call a javascript function in a parent window after this one opens a new child window.

[CLOSED] Find Parent Node and Reassign node to founded Parent Node in Tree view

[CLOSED] Problem when adding a Tree Node from Javascript

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources