TreePanel dynamic nodes in user control

  1. #1

    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:
    <%@ 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:

    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:

    <%@ 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

    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.
  2. #2
    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.
  3. #3
    Hello anyone there?
    Last edited by miguel; May 02, 2013 at 1:37 PM.
  4. #4
    Hi @miguel,

    Running your sample, I see the error in FireFox FireBug console.
    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.
    var tree = document.getElementById(treeId);
    You should replace it with
    var tree = Ext.getCmp(treeId);
    After this change your example appears to be working fine.
  5. #5

    Thanks!

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

    Miguel.

Similar Threads

  1. Replies: 18
    Last Post: Jan 23, 2013, 3:20 PM
  2. Replies: 1
    Last Post: Aug 01, 2011, 10:08 AM
  3. Dynamic User Control Loading
    By Rupesh in forum 1.x Help
    Replies: 0
    Last Post: Apr 08, 2011, 7:48 AM
  4. [CLOSED] Treepanel in User Control
    By asztern in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 26, 2010, 7:36 PM
  5. user control dynamic data
    By voldamirin in forum 1.x Help
    Replies: 0
    Last Post: Oct 25, 2010, 12:05 PM

Tags for this Thread

Posting Permissions