Feb 18, 2013, 1:52 PM
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:
Thanks in advance.
Miguel.
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 controlusing 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.