[CLOSED] Tree clear nodes

  1. #1

    [CLOSED] Tree clear nodes

    What am I not understanding?

    The tree is initially populated with 10 items. I can press the refresh button and have 10 new items created via a DirectMethod and shown in the tree. If I press the Minus button I call the DirectMethod only creating the root node. But when I populate the tree nothing is shown (GOOD), but a horizontal scroll bar is shown (BAD).

    What am I doing incorrectly?

    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack && !X.IsAjaxRequest)
            {
                this.BuildTree(TreePanel1.Root, 10);
            }
        }
    
        private Ext.Net.NodeCollection BuildTree(Ext.Net.NodeCollection nodes, int nodeCount)
        {
            if (nodes == null)
            {
                nodes = new Ext.Net.NodeCollection();
            }
    
            Ext.Net.Node root = new Ext.Net.Node();
            root.Text = "Root";
            root.Expanded = false;
            root.Leaf = true;
            nodes.Add(root);
    
            string prefix = DateTime.Now.Second + "_";
    
            for (int i = 0; i < nodeCount; i++)
            {
                Ext.Net.Node node = new Ext.Net.Node();
                node.Text = prefix + i;
                node.Leaf = true;
                root.Children.Add(node);
            }
            if (root.Children != null && root.Children.Count() > 0)
            {
                root.Expanded = true;
                root.Leaf = false;
            }
            
            return nodes;
        }
    
        [DirectMethod]
        public string RefreshMenu()
        {
            Ext.Net.NodeCollection nodes = this.BuildTree(null, 10);
    
            return nodes.ToJson();
        }
    
        [DirectMethod]
        public string RefershNoNodes()
        {
            Ext.Net.NodeCollection nodes = this.BuildTree(null, 0);
    
            return nodes.ToJson();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Refresh Static Tree - Ext.NET Examples</title>
        <script>
            var refreshTree = function (tree) {
                App.direct.RefreshMenu({
                    success: function (result) {
                        var nodes = eval(result);
                        debugger;
                        //if (nodes.length > 0) {
                        if (nodes[0].children != undefined) {
                            tree.setRootNode(nodes[0]);
                        }
                        else {
                            tree.getRootNode().removeAll();
                        }
                    }
                });
            };
    
            var refershNoNodes = function (tree) {
                App.direct.RefershNoNodes({
                    success: function (result) {
                        var nodes = eval(result);
                        debugger;
                        if (nodes[0].children != undefined) {
                            tree.setRootNode(nodes[0]);
                        }
                        else {
                            tree.getRootNode().removeAll(true);
                        }
                    }
                });
            };
    
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Icon="Anchor" Width="250"
            Height="175" RootVisible="false" BodyPaddingSummary="0 0 0 10">
            <Tools>
                <ext:Tool Type="Refresh" Handler="refreshTree(#{TreePanel1});">
                    <ToolTips>
                        <ext:ToolTip runat="server" Html="Refresh" />
                    </ToolTips>
                </ext:Tool>
                <ext:Tool Type="Minus" Handler="refershNoNodes(#{TreePanel1});">
                    <ToolTips>
                        <ext:ToolTip runat="server" Html="No Nodes" />
                    </ToolTips>
                </ext:Tool>
            </Tools>
        </ext:TreePanel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Dec 01, 2015 at 4:43 PM. Reason: [CLOSED]
  2. #2
    Hi Chris,

    I am not sure why that horizontal scroll appears.

    As a workaround I can suggest this:
    <ext:TreePanel ... Cls="my-treepanel">
    <style>
        .my-treepanel .x-tree-view {
            overflow-x: hidden !important;
        }
    </style>
  3. #3
    Obviously the only problem with the work around is the Cls assignment needs to be conditional incase a horizontal scrollbar is needed when there are nodes populated in the tree.
  4. #4
    It might be difficult to determine that programmatically and I've came up with an idea to, maybe, change the workaround to another:
    if (nodes[0].children != undefined) {
        tree.setRootNode(nodes[0]);
        tree.getView().getEl().setStyle({
            "overflow-x": "auto"
        });
    } else {
        tree.getRootNode().removeAll(true);
        tree.getView().getEl().setStyle({
            "overflow-x": "hidden"
        });
    }
  5. #5
    Thanks Daniil. This works great.

Similar Threads

  1. [CLOSED] TreePanel Clear Root Nodes, Add More from AjaxMethod
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Jun 25, 2014, 4:33 PM
  2. [CLOSED] Select all tree panel nodes
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Aug 30, 2013, 10:55 AM
  3. Replies: 4
    Last Post: Mar 08, 2013, 4:16 PM
  4. [CLOSED] Tree Nodes Alignment
    By Etisbew in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 25, 2009, 2:03 PM
  5. How do I clear out a child nodes from a TreeNode?
    By dbassett74 in forum 1.x Help
    Replies: 3
    Last Post: May 26, 2009, 1:39 PM

Posting Permissions