Dependant DropDownFields

  1. #1

    Dependant DropDownFields

    Hi Everyone,

    I'm attempting to "link" 2 DropDownFields (each containing a TreePanel).

    The idea being that:
    • The first dropdownfield / treepanel contains a list of X (in my case current locations).
    • Once I've selected the appropriate record from the treepanel, the subsequent dropdownfield is to be refreshed and contain

    a list of available destinations.

    • In essence I've have the code working, with one small problem. My 2nd DropDownField is not being populated / updated

    although the treepanel used / referenced contains the new records.

    Any comments / suggestions on how I may "update" the 2nd DropDownField to display the new treepanel would be helpfull.

    Thanks in advance

    Code is as follows:

    Code.aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Code.aspx.cs" Inherits="Gidani_Code" %>
    
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1" runat="server">
        <title>Test Page</title>
    </head>
    <body>
        <ext:ResourceManager runat="server" />
        
        <ext:Panel runat="server" Height="100" Width="500" Layout="AnchorLayout">
            <Items>
                <ext:DropDownField
                    ID="ddfCurrent"
                    runat="server"
                    TriggerIcon="SimpleArrowDown"
                    FieldLabel="Current"
                    LabelWidth="125"
                    EmptyText="SELECT A CURRENT LOCATION"
                    AnchorHorizontal="95%">
                    <Component>
                        <ext:TreePanel
                            ID="tpCurrent"
                            runat="server"
                            UseArrows="true"
                            RootVisible="false"
                            ContainerScroll="true"
                            Animate="true"
                            Shadow="None"
                            Header="false"
                            Title=" "
                            Height="200"
                            BodyStyle="overflow-x:hidden;"
                            AutoScroll="true">
                            <Root>
                                <ext:TreeNode NodeID="tpCurrent_root" Text="Root" />
                            </Root>
                            <Listeners>
                                <Click Handler="var isChildNode = !node.hasChildNodes(); if (isChildNode) {this.dropDownField.setValue(node.text);} return isChildNode;" />
                            </Listeners>
                            <DirectEvents>
                                <Click OnEvent="tpCurrent_Click" Timeout="90000">
                                    <ExtraParams>
                                        <ext:Parameter Name="locId" Value="node.attributes.locId" Mode="Raw" />
                                    </ExtraParams>
                                </Click>
                            </DirectEvents>
                        </ext:TreePanel>
                    </Component>
                    <Listeners>
                        <Expand Handler="this.component.getRootNode().expand(true);" />
                    </Listeners>
                </ext:DropDownField>
                
                <ext:DropDownField
                    ID="ddfDestination"
                    runat="server"
                    TriggerIcon="SimpleArrowDown"
                    FieldLabel="Destination"
                    LabelWidth="125"
                    EmptyText="SELECT A DESTINATION LOCATION"
                    AnchorHorizontal="95%">
                    <Component>
                        <ext:TreePanel
                            ID="tpDestination"
                            runat="server"
                            UseArrows="true"
                            RootVisible="false"
                            ContainerScroll="true"
                            Animate="true"
                            Shadow="None"
                            Header="false"
                            Title=" "
                            Height="200"
                            BodyStyle="overflow-x:hidden;"
                            AutoScroll="true">
                            <Root>
                                <ext:TreeNode NodeID="tpDestination_root" Text="Root" />
                            </Root>
                        </ext:TreePanel>
                    </Component>
                </ext:DropDownField>
            </Items>
        </ext:Panel>
    </body>
    </html>
    Code.aspx.cs
    using System;
    
    
    using Ext.Net;
    
    
    public partial class Gidani_Code : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.BuildCurrent();
            }
        }
    
    
        private void BuildCurrent()
        {
            this.BuildTree(this.tpCurrent.Root, this.tpCurrent.ID, null);
        }
    
    
        private void BuildDestination(String currentLocId)
        {
            this.BuildTree(this.tpDestination.Root, this.tpDestination.ID, currentLocId);
    
    
            X.Js.Alert("BuildDestination - Msg from server");
            X.Js.Alert("Node Added: [" + ((Ext.Net.TreeNodeCollection)this.tpDestination.Root).ToJson() + "]");
        }
    
    
        protected Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes, String id, String prefix)
        {
            Ext.Net.TreeNode root = null;
            Ext.Net.TreeNode node = null;
            Ext.Net.ConfigItem configItem = null;
    
    
            if (nodes == null)
            {
                nodes = new Ext.Net.TreeNodeCollection();
            }
    
    
            if (nodes.Count == 0)
            {
                root = new Ext.Net.TreeNode("root");
                root.Expanded = true;
                root.NodeID = id + "_root";
    
    
                nodes.Add(root);
            }
            else
            {
                root = (Ext.Net.TreeNode)nodes[0];
            }
    
    
            for (int i = 0; i < 10; i++)
            {
                configItem = new ConfigItem("locId", (String.IsNullOrEmpty(prefix) ? i.ToString() : prefix + "_" + i.ToString()));
    
    
                node = new Ext.Net.TreeNode();
                node.NodeID = "Node_" + (String.IsNullOrEmpty(prefix) ? i.ToString() : prefix + "_" + i.ToString());
    
    
                node.Text = "Loc " + (String.IsNullOrEmpty(prefix)? i.ToString() : prefix + "_" + i.ToString());
                node.Leaf = true;
                node.CustomAttributes.Add(configItem);
    
    
                root.Nodes.Add(node);
            }
    
    
            return nodes;
        }
    
    
        protected void tpCurrent_Click(object sender, Ext.Net.DirectEventArgs e)
        {
            String currentLocId = e.ExtraParams["locId"];
    
    
            if (!String.IsNullOrEmpty(currentLocId))
            {
                this.BuildDestination(currentLocId);
            }
        }
    }
  2. #2
    Hi @stevenoc,

    Populating a TreePanel's Root during an AJAX request doesn't load nodes into a TreePanel.

    Here is how you can add nodes to an already rendered TreePanel.
    https://examples1.ext.net/#/TreePane...h_Static_Tree/

    Another approach is using an AsyncTreeNode.
    https://examples1.ext.net/#/TreePane...Method_Loader/
    https://examples1.ext.net/#/TreePane...ageTreeLoader/

Tags for this Thread

Posting Permissions