TreePanel dynamic nodes in user control

Hello, I have a problem that I have been trying to solve for a couple of days. I am taking from your examples but unfortunately none of them reflect exactly what I am trying to do. I am trying to rebuild a tree in a user control as a response to a call from the parent page/control on a trigger click.
This is my first post so please excuse me if I don't use the editor correctly. I am pasting my code below:

Main Page:

Code:

---

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="uc" Src="~/Controls/TreeViewControl.ascx" TagName="TreeViewControl" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
   
        <ext:FormPanel
            ID="FormPanel1"
            runat="server"
            Title="Form"
            BodyBorder="true"
            Frame="true"
            Padding="5"
            MonitorValid="true"
            BodyStyle="background-color:transparent;"
            Layout="Form"
            >
            <Items>
                <ext:ComboBox
                    ID="ComboBoxTreeType"
                    LabelAlign="Right"
                    FieldLabel="Subject"
                    runat="server"
                    Width="720"
                    AllowBlank="false">
                    <Items>
                        <ext:ListItem Text="Science" Value="Science" />
                        <ext:ListItem Text="Social" Value="Social" />
                    </Items>
                </ext:ComboBox>
                <ext:TriggerField
                    runat="server"
                    EmptyText="Select from the tree"
                    FieldLabel="Class"
                    ID="TriggerFieldTreeSelect"
                    Width="720">
                    <Triggers>
                        <ext:FieldTrigger Icon="Search" />
                    </Triggers>
                    <DirectEvents>
                        <TriggerClick OnEvent="TriggerFieldTreeSelect_TriggerClicked" />
                    </DirectEvents>
                </ext:TriggerField>
        </Items>
    </ext:FormPanel>
    <ext:Window
            ID="WindowTreeSelector"
            runat="server"
            Title="Class Picker"
            Hidden="true"
            Padding="5"
            Width="760"
            Height="500"
            Resizable="false">
            <Content>
                <uc:TreeViewControl ID="CtrlTreeView" runat="server" />
            </Content>
    </ext:Window>
</asp:Content>

---

My code behind on that page:

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void TriggerFieldTreeSelect_TriggerClicked(object sender, EventArgs e)
    {
        this.WindowTreeSelector.Hidden = false;
        this.CtrlTreeView.ShowTree(this.ComboBoxTreeType.SelectedItem.Value);

    }
}

---

My control:

Code:

---

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="TreeViewControl.ascx.cs" Inherits="Controls_TreeViewControl" %>

<ext:XScript runat="server">
    <script type="text/javascript">

        var reloadTree = function (treeId, result) {
            var tree = document.getElementById(treeId);
            var nodes = eval(result);
            //alert("In function call " + treeId);
            if (nodes.length > 0) {
                tree.initChildren(nodes);
            }
            else {
                tree.getRootNode().removeChildren();
            }
        }

    </script>
</ext:XScript>

<ext:TreePanel
    ID="TreePanel1"
    runat="server"
    Title="Tree"
    Width="720"
    Height="380"
    Icon="Application" 
    RootVisible="true"
    AutoScroll="true"
    OnSubmit="SubmitNodes">
    <Root>
        <ext:TreeNode
            Text="Classes"
            Expanded="true"
            AllowChildren="true"
            Editable="true"
            NodeID="Classes"
            Expandable="True" >
        </ext:TreeNode>
    </Root>
    <Buttons>
        <ext:Button ID="Button1" runat="server" Text="Select" Icon="Accept">
            <Listeners>
                <Click Handler="#{TreePanel1}.submitNodes();" />
            </Listeners>
        </ext:Button>
    </Buttons>           
</ext:TreePanel>

---

My code behind my control

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Controls_TreeViewControl : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    public void ShowTree(string id)
    {
        Ext.Net.TreeNodeCollection treeNodes = this.TreePanel1.Root;
        if (treeNodes == null)
        {
            treeNodes = new Ext.Net.TreeNodeCollection();
        }

        Ext.Net.TreeNode rootNode = null;

        if (treeNodes.Count > 0)
        {
            rootNode = treeNodes[0] as Ext.Net.TreeNode;
            if (rootNode.Nodes.Count > 0)
            {
                rootNode.Nodes.RemoveAt(0);
            }
        }
        else
        {
            rootNode = new Ext.Net.TreeNode()
            {
                NodeID = "Classes",
                Text = "Classes",
                Expandable = Ext.Net.ThreeStateBool.True,
                AllowChildren = true,
                Icon = Ext.Net.Icon.Rosette
            };
            treeNodes.Add(rootNode);
        }
        switch(id)
        {
            case "Science":
                rootNode = this.BuildRootTreeScience(rootNode);
                break;
            case "Social":
                rootNode = this.BuildRootTreeSocial(rootNode);
                break;

        }

        this.TreePanel1.SetRootNode(rootNode);

        string jsonTreeNodes = treeNodes.ToJson();

        Ext.Net.X.Call("reloadTree", this.TreePanel1.ClientID, jsonTreeNodes);
    }
    protected Ext.Net.TreeNode BuildRootTreeScience(Ext.Net.TreeNode rootNode)
    {
        Ext.Net.TreeNode subjectNode = new Ext.Net.TreeNode()
        {
            Text = "Math",
            Qtip = "Math",
            NodeID = "Math",
            Icon = Ext.Net.Icon.Folder,
            AllowChildren = true,
            Expandable = Ext.Net.ThreeStateBool.True
        };
        for (int i = 101; i < 600; i = i + 100)
        {
            Ext.Net.TreeNode classNode = new Ext.Net.TreeNode()
            {
                Text = i.ToString(),
                Qtip = "Math " + i.ToString(),
                NodeID = "Math_" + i.ToString(),
                Icon = Ext.Net.Icon.LinkGo
            };
            subjectNode.Nodes.Add(classNode);
        }
        Ext.Net.TreeNode subject2Node = new Ext.Net.TreeNode()
        {
            Text = "Physics",
            Qtip = "Physics",
            NodeID = "Physics",
            Icon = Ext.Net.Icon.Folder,
            AllowChildren = true,
            Expandable = Ext.Net.ThreeStateBool.True
        };
        for (int i = 101; i < 600; i = i + 100)
        {
            Ext.Net.TreeNode classNode = new Ext.Net.TreeNode()
            {
                Text = i.ToString(),
                Qtip = "Physics " + i.ToString(),
                NodeID = "Physics_" + i.ToString(),
                Icon = Ext.Net.Icon.LinkGo
            };
            subject2Node.Nodes.Add(classNode);
        }
        rootNode.Nodes.Add(subjectNode);
        rootNode.Nodes.Add(subject2Node);
        return rootNode;
    }
    protected Ext.Net.TreeNode BuildRootTreeSocial(Ext.Net.TreeNode rootNode)
    {
        Ext.Net.TreeNode subjectNode = new Ext.Net.TreeNode()
        {
            Text = "History",
            Qtip = "History",
            NodeID = "History",
            Icon = Ext.Net.Icon.Folder,
            AllowChildren = true,
            Expandable = Ext.Net.ThreeStateBool.True
        };
        for (int i = 101; i < 600; i = i + 100)
        {
            Ext.Net.TreeNode classNode = new Ext.Net.TreeNode()
            {
                Text = i.ToString(),
                Qtip = "History " + i.ToString(),
                NodeID = "History_" + i.ToString(),
                Icon = Ext.Net.Icon.LinkGo
            };
            subjectNode.Nodes.Add(classNode);
        }
        Ext.Net.TreeNode subject2Node = new Ext.Net.TreeNode()
        {
            Text = "Art",
            Qtip = "Art",
            NodeID = "Art",
            Icon = Ext.Net.Icon.Folder,
            AllowChildren = true,
            Expandable = Ext.Net.ThreeStateBool.True
        };
        for (int i = 101; i < 600; i = i + 100)
        {
            Ext.Net.TreeNode classNode = new Ext.Net.TreeNode()
            {
                Text = i.ToString(),
                Qtip = "Art " + i.ToString(),
                NodeID = "Art_" + i.ToString(),
                Icon = Ext.Net.Icon.LinkGo
            };
            subject2Node.Nodes.Add(classNode);
        }
        rootNode.Nodes.Add(subjectNode);
        rootNode.Nodes.Add(subject2Node);
        return rootNode;
    }
    protected void SubmitNodes(object sender, Ext.Net.SubmitEventArgs e)
    {
        Ext.Net.X.Msg.Alert("Submit", "You have submitted " + e.RootNode.NodeID).Show();
    }
}

---

The result when I select something from the page drop down (Science for example) and click on the triggerbox's trigger is an empty tree with only the root node in it. I was expecting the Science tree to show for the Science selection and the Social tree to show for the social selection. How can I accomplish this behavior?

Thanks in advance.

Miguel.

It has been a week since I posted this question, just wondering if this is not something that can be done using the Ext.NET controls.
Please let me know so I can research other controls if this is the case.
Thanks.

Miguel.

Hello anyone there?

Hi @miguel,

Running your sample, I see the error in FireFox FireBug console.

Code:

---

tree.initChildren is not a function

---

Chrome and IE would catch it as well.

The error occurs here in the reloadTree function, because getElementById() doesn't retrieve an instance of a JavaScript TreePanel class.

Code:

---

var tree = document.getElementById(treeId);

---

You should replace it with

Code:

---

var tree = Ext.getCmp(treeId);

---

After this change your example appears to be working fine.

Thanks Daniil, it works like a charm now :).

Miguel.