EXT.NET 3.0.0 RELEASED!
Now with Tablet Support!
Ext.NET 3.0.0 is here with lots of new cool features and now with tablet support! Check Examples Explorer now to see it in action or download and test it yourself for free!
Results 1 to 5 of 5

Thread: TreePanel dynamic nodes in user control

  1. #1
    Member
    Join Date
    Feb 2013
    Location
    Cincinnati, OH, USA
    Posts
    7

    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.

  2. #2
    Member
    Join Date
    Feb 2013
    Location
    Cincinnati, OH, USA
    Posts
    7
    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
    Member
    Join Date
    Feb 2013
    Location
    Cincinnati, OH, USA
    Posts
    7
    Hello anyone there?
    Last edited by miguel; May 02, 2013 at 2:37 PM.

  4. #4
    Ext.NET - Support Team Daniil's Avatar
    Join Date
    Jun 2010
    Location
    Saint-Petersburg, Russia
    Posts
    28,058
    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.
    Daniil
    Ext.NET, Inc.
    Support Team

    Ext.NET Examples | Ext.NET API Docs | ExtJS API Docs | Twitter | Jobs

  5. #5
    Member
    Join Date
    Feb 2013
    Location
    Cincinnati, OH, USA
    Posts
    7

    Thanks!

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

    Miguel.

Similar Threads

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

Tags for this Thread

Posting Permissions