May 03, 2012, 4:01 PM
[CLOSED] Usercontrol with Dropdownfield Treepanel is not reloading when it populated on new events
I created a usercontrol which has a Dropdownfield with TreePanel inside that and it is returing the selected node list through a property. I added that to an aspx page and it is displaying the dropdown tree with populated values. When I tried to reload the tree with different value, it is loading in the server side but not displaying in the page. Tree displaying the old value.
ASCX Page
ASPX Page
Please help on this.
Thanks
ASCX Page
<%@ Control Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="System.Collections.Generic" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack || !X.IsAjaxRequest)
{
//BuildTree(1);
}
}
public void BuildTree(int level)
{
StringBuilder _selectedValueText = new StringBuilder(string.Empty);
int level1 = level;
int level2 = level1+100;
int level3 = level1+1000;
Ext.Net.TreeNode _carrierNode = new Ext.Net.TreeNode();
Ext.Net.TreeNode _accountNode = new Ext.Net.TreeNode();
Ext.Net.TreeNode _lobNode = new Ext.Net.TreeNode();
//REMOVING THE EXISTING ROOT NODE CREATED.
if (((Ext.Net.StateManagedCollection<Ext.Net.TreeNodeBase>)(tp.Root)).Count > 0)
{
tp.Root.Remove(((Ext.Net.StateManagedCollection<Ext.Net.TreeNodeBase>)(tp.Root))[0]);
}
Ext.Net.TreeNodeCollection nodes = tp.Root;
if (nodes == null)
{
nodes = new Ext.Net.TreeNodeCollection();
}
Ext.Net.TreeNode root = new Ext.Net.TreeNode("-1", "All", Icon.Folder);
root.Checked = ThreeStateBool.False;
root.Listeners.CheckChange.Fn = "ucnodeChecked";
nodes.Add(root);
for (int i = 0; i < 5; i++)
{
level1 = level1 + 1;
_carrierNode = AddNode(level1.ToString(), "level1-" + level1.ToString(), root, Icon.Folder);
for (int j = 0; j < 2; j++)
{
level2 = level2 + 1;
_accountNode = AddNode(string.Format("{0}:{1}", level1, level2), "level2-" + level2.ToString(), _carrierNode, Icon.Folder);
for (int k = 0; k < 2; k++)
{
level3 = level3 + 1;
_lobNode = AddNode(string.Format("{0}:{1}:{2}", level1, level2, level3), "level3-" + level3.ToString(), _accountNode, Icon.Folder);
}
}
}
}
private Ext.Net.TreeNode AddNode(string nodeID, string nodeText, Ext.Net.TreeNode parentNode, Ext.Net.Icon icon)
{
Ext.Net.TreeNode newNode = new Ext.Net.TreeNode(nodeID, nodeText, icon);
newNode.Checked = ThreeStateBool.False;
parentNode.Nodes.Add(newNode);
newNode.Listeners.CheckChange.Fn = "ucnodeChecked";
return newNode;
}
public String SelectedValues
{
get { return hidSelectedIds.Text; }
}
</script>
<script type="text/javascript">
//node check
function ucnodeChecked(node, checked) {
//parentnode code
var parentNode = node.parentNode;
if (parentNode !== null) {
ucparentCheck(parentNode, checked);
}
//childnode code
ucchildCheck(node, checked);
ucfindCheckedNodes(this.ownerTree);
if (selText.length <= 0) selText = 'No Plan Selected'
Ext.getCmp('ucTreeList_ddlTreeHolder').setValue('[' + selText + ']', false);
}
function ucchildCheck(node, checked) {
node.expand();
var nodeAttr = node.attributes;
if (!nodeAttr.leaf)
//filter leaf,when the leaf is checked, do not loop the parentnode event. great efficiency
{
node.eachChild(function (child) {
if (child && child.getUI().checkbox != undefined) {
child.getUI().checkbox.checked = checked;
}
ucchildCheck(child, checked);
});
}
}
function ucparentCheck(node, checked) {
var checkbox = node.getUI().checkbox;
if (typeof checkbox == 'undefined') return;
var state = this.ucchildHasChecked(node, checked);
if (state == 0) {
//All of the childnodes are unchecked (checked=false and indeterminate=false)
checkbox.checked = false;
checkbox.indeterminate = false;
}
else if (state == 1) {
//All of the childnodes are checked (checked=true and indeterminate=true),in fact,the childnodes are indeterminate,
checkbox.checked = true;
checkbox.indeterminate = true;
}
else {
//All of the childnodes are checked , not indeterminate .(checked=true and indeterminate=false)
checkbox.checked = true;
checkbox.indeterminate = false;
}
// checkbox.checked = checked;
node.attributes.checked = checkbox.checked;
node.getOwnerTree().fireEvent('check', node, checked);
var parentNode = node.parentNode;
if (parentNode !== null) {
this.ucparentCheck(parentNode, checked);
}
}
function ucchildHasChecked(node, checked) {
var childNodes = node.childNodes;
var retValue = 0;
if (childNodes || childNodes.length > 0) {
for (var i = 0; i < childNodes.length; i++) {
var checkbox = childNodes[i].getUI().checkbox;
//a. the node is checked and the "indeterminate" is false
//b. Aim of this loop is cancel the selected state. if the childnode has been checked,
// and [ if (indeterminate==true) the node is marked "indeterminate=true" else "checked=false and indeterminate=false" ]
if (!checked) {
if (checkbox.checked)
return 1;
} else {
retValue = 2;
if (!checkbox.checked || (checkbox.checked && checkbox.indeterminate)) {
return 1;
}
}
}
}
return retValue;
}
//get checked nodes
function ucfindCheckedNodes(tree) {
finducCheckedNodesFromTree(tree.root);
}
var checkedIds;
var selText;
function finducCheckedNodesFromTree(treeRoot) {
checkedIds = [];
selText = "";
findAllucCheckedNodes(treeRoot);
var val = checkedIds.join('|').toString();
Ext.getCmp('ucTreeList_hidSelectedIds').setValue(val);
//alert(val);
}
function findAllucCheckedNodes(node) {
var nodeArray = node.childNodes;
for (var i = 0; i < nodeArray.length; i++) {
if (nodeArray[i].childNodes.length == 0) {
if (nodeArray[i].getUI().checkbox != undefined && nodeArray[i].getUI().checkbox.checked == true) {
//listOfIds = listOfIds + nodeArray[i].id + ',';
checkedIds.push(nodeArray[i].id);
//var c = Ext.getCmp('hidSelectedIds').getValue();
if (selText.length > 0) selText = selText + ',';
selText = selText + nodeArray[i].parentNode.parentNode.text + ':' + nodeArray[i].parentNode.text + ':' + nodeArray[i].text;
}
}
if (nodeArray[i].hasChildNodes()) {
findAllucCheckedNodes(nodeArray[i]);
}
}
}
</script>
<ext:Container ID="Container1" runat="server" Border="false" Padding="4" >
<Items>
<ext:DropDownField ID="ddlTreeHolder" FieldLabel="My List" CtCls="DropDown" runat="server" Mode="Text" Editable="false" Width="400">
<Component>
<ext:TreePanel ID="tp" runat="server" Title="My List"
Icon="Accept"
Shadow="None"
UseArrows="true"
AutoScroll="false"
Animate="true"
EnableDD="true"
ContainerScroll="true">
</ext:TreePanel>
</Component>
<Listeners>
<Expand Handler="this.component.getRootNode().expand(true);" Single="true" Delay="10" />
</Listeners>
</ext:DropDownField>
<ext:Hidden ID="hidSelectedIds" runat="server" />
</Items>
</ext:Container>
ASPX Page
<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/UserControls/TestTreeControl.ascx" TagName="TreeList" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack || !X.IsAjaxRequest)
{
ucTreeList.BuildTree(1);
}
}
protected void btnSelectedValues_Click(object sender, DirectEventArgs e)
{
lblddlValues.Text = "Selected values Displayed";
txtSelectedIds.Text = ucTreeList.SelectedValues;
}
protected void btnLoad2_Click(object sender, DirectEventArgs e)
{
lblddlValues.Text = "Load with 200 Clicked";
txtSelectedIds.Text = "";
ucTreeList.BuildTree(200);
}
protected void btnLoad4_Click(object sender, DirectEventArgs e)
{
lblddlValues.Text = "Load with 400 Clicked";
txtSelectedIds.Text = "";
ucTreeList.BuildTree(400);
}
protected void btnLoad6_Click(object sender, DirectEventArgs e)
{
lblddlValues.Text = "Load with 600 Clicked";
txtSelectedIds.Text = "";
ucTreeList.BuildTree(600);
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Default Control Test Page</title>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Viewport ID="Viewport1" runat="server">
<Content>
<table>
<tr>
<tr><td colspan="3"> </td></tr>
<td colspan="3">
<uc1:TreeList ID="ucTreeList" Width="400" runat="server" />
</td>
<td>
<ext:Button ID="btnSelectedValues" Disabled="false" OnDirectClick="btnSelectedValues_Click"
Text="Display Selected Values" CausesValidation="false" runat="server">
</ext:Button>
</td>
</tr>
<tr>
<td colspan="3">
<ext:Button ID="Button1" Disabled="false" OnDirectClick="btnLoad2_Click"
Text="Load with 200" CausesValidation="false" runat="server">
</ext:Button>
<ext:Button ID="Button2" Disabled="false" OnDirectClick="btnLoad4_Click"
Text="Load with 400" CausesValidation="false" runat="server">
</ext:Button>
<ext:Button ID="Button3" Disabled="false" OnDirectClick="btnLoad6_Click"
Text="Load with 600" CausesValidation="false" runat="server">
</ext:Button>
</td>
</tr>
<tr>
<td colspan="3">
<ext:Label runat="server" Text="Old Text" ID="lblddlValues">
</ext:Label>
</td>
</tr>
<tr>
<td colspan="3">
<ext:TextArea ID="txtSelectedIds" Width="300" runat="server">
</ext:TextArea>
</td>
</tr>
</table>
</Content>
</ext:Viewport>
</form>
</body>
</html>
Please help on this.
Thanks
Last edited by Daniil; May 14, 2012 at 8:08 PM.
Reason: [CLOSED]