We have been working hard on Ext.NET Mobile and are happy to announce a Beta release is now available. Ext.NET Mobile is an ASP.NET component framework for building Phone and Tablet specific mobile web applications. Read more here

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.
    Daniil Veriga
    Developer & Support Expert
  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 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

Subscribe now to get the latest Ext.NET happenings in our newsletter.