[CLOSED] [1.3] Problem with rootVisible on TreePanel

**John_Writers** · Mar 27, 2012, 2:22 PM

Hi,
I used a treepanel with asyncnode for childs.
The root is fixed and I would to show it dinamically, but If I set the RootVisible property on Treepanel object the root is always hide.
In aspx code I set the property to False because at the first time I need to hide it, but when I try to show it, the root is always hide.

The example code is the follow:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" %>


<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" CleanResourceUrl="false"
        RethrowAjaxExceptions="true" />
    <ext:Panel runat="server" Padding="0" Layout="FormLayout" Title="Panel" Height="400">
        <TopBar>
            <ext:StatusBar ID="tbToolbar" runat="server" StatusAlign="Left">
                <Items>
                    <ext:Button runat="server" ID="Button1" Text="Button" Icon="Disk">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.rootVisible = true;" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:StatusBar>
        </TopBar>
        <Items>
            <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="500" AutoHeight="true"
                Border="false" RootVisible="false" Hidden="false">
                <LoadMask ShowMask="true" />
                <Root>
                   
                    <ext:AsyncTreeNode NodeID="0" Text="Root">
                    </ext:AsyncTreeNode>
                </Root>
            </ext:TreePanel>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>

Is there a wrong thinks

Thanks to all.

**Daniil** · Mar 27, 2012, 2:54 PM

Hi,

Just setting up the property in JavaScript

#{TreePanel1}.rootVisible = true;

doesn't produce any actions as it might be with C# properties within its setter.

Anyways, there is no built-in functionality to show a root node on the fly.

I can't see a better solution that re-rendering a TreePanel.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void ShowRoot(object sender, DirectEventArgs e)
    {
        this.TreePanel1.RootVisible = true;
        this.TreePanel1.Render();
    }
</script>

<!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 runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <ext:ResourceManager runat="server" />
    <ext:TreePanel 
        ID="TreePanel1" 
        runat="server" 
        AutoHeight="true" 
        RootVisible="false">
        <Root>
            <ext:TreeNode Text="Root (level 0)" Expanded="true">
                <Nodes>
                    <ext:TreeNode Text="Node1 (level 1)" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="Node1 (level 2)" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Node1 (level 3)" />
                                    <ext:TreeNode Text="Node2 (level 3)" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                    <ext:TreeNode Text="Node2 (level 1)" Expanded="true">
                        <Nodes>
                            <ext:TreeNode Text="Node1 (level 2)" Expanded="true">
                                <Nodes>
                                    <ext:TreeNode Text="Node1 (level 3)" />
                                    <ext:TreeNode Text="Node2 (level 3)" />
                                </Nodes>
                            </ext:TreeNode>
                        </Nodes>
                    </ext:TreeNode>
                </Nodes>
            </ext:TreeNode>
        </Root>
    </ext:TreePanel>
    <ext:Button runat="server" Text="Show Root" OnDirectClick="ShowRoot" />
</body>
</html>

**John_Writers** · Mar 27, 2012, 3:26 PM

Thanks for reply.
I change the examples to use the asyncnode because I need to load the node dinamically.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" %>

<%@ 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 runat="server">
    <title></title>
</head>
<body>
    <script runat="server">
        protected void NodeLoad(object sender, NodeLoadEventArgs e)
        {
            for (int i = 0; i < 5; i++)
            {
                AsyncTreeNode asyncNode = new AsyncTreeNode();


                asyncNode.NodeID = e.NodeID + "-" + i.ToString();
                asyncNode.Text = asyncNode.NodeID;
                asyncNode.Checked = ThreeStateBool.False;
                e.Nodes.Add(asyncNode);
            }


            TreePanel1.RootVisible = true;
            TreePanel1.Render();
        }
    </script>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" Theme="Gray" CleanResourceUrl="false"
        RethrowAjaxExceptions="true" />
    <ext:Panel runat="server" Padding="0" Layout="FormLayout" Title="Panel" Height="400">
        <TopBar>
            <ext:StatusBar ID="tbToolbar" runat="server" StatusAlign="Left">
                <Items>
                    <ext:Button runat="server" ID="Button1" Text="Button" Icon="Disk">
                        <Listeners>
                            <Click Handler="#{TreePanel1}.rootVisible = true;" />
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:StatusBar>
        </TopBar>
        <Items>
            <ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Width="500" AutoHeight="true"
                Border="false" RootVisible="false" Hidden="false">
                <Loader>
                    <ext:PageTreeLoader OnNodeLoad="NodeLoad" ClearOnLoad="true">
                    </ext:PageTreeLoader>
                </Loader>
                <LoadMask ShowMask="true" />
                <Root>
                    <ext:AsyncTreeNode NodeID="0" Text="Root">
                    </ext:AsyncTreeNode>
                </Root>
            </ext:TreePanel>
        </Items>
       
    </ext:Panel>
    </form>
</body>
</html>

but the browser show me the follow error: Error: Unable to set value of the property 'transId': object is null or undefined

Does Treepanel.render works with asynctreenode?

thanks

**Daniil** · Mar 27, 2012, 4:15 PM

Well, it won't work within an OnNodeLoad handler.

This looks strange that you are trying to show a root within an OnNodeLoad handler. Please clarify the requirement.

**John_Writers** · Mar 28, 2012, 2:08 PM

Hi Daniil,
in my application I filter the nodes with a description. If I founded no items at top level I would to show a root with the label "No items founds". If I find at least one item I show the root's childs. I check the childs count into NodeLoad events and in this method I need to show or hide the root.

I know that I can to produce the effect with a label, but I would to try with root.

Is this possibile or there is another method?

Thanks for patience

**Daniil** · Mar 28, 2012, 8:28 PM

I think it would be too difficult with to show/hide root.

I can suggest the following solution.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void NodeLoad(object sender, NodeLoadEventArgs e)
    {
        X.AddScript("var el = Ext.fly('spanNoItems'); if (el) { el.remove(); }");
        
        bool empty = JSON.Deserialize<bool>(e.ExtraParams["empty"]);

        if (empty)
        {
            X.Call("markEmpty", new JRawValue(this.TreePanel1.ClientID));
        }
        else
        {
            e.Nodes.Add(new Ext.Net.TreeNode()
            {
                Text = "Some node 1",
                Leaf = true
            });
            e.Nodes.Add(new Ext.Net.TreeNode()
            {
                Text = "Some node 2",
                Leaf = true
            });
        }
    }
</script>

<!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 runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var markEmpty = function (tree) {
            tree.body.child(".x-tree-root-node").insertHtml("afterEnd", "<span id='spanNoItems'>No items</span>");
        };

        var filter = function (tree, empty) {
            tree.getLoader().on(
                "beforeload", 
                function (loader) {
                    loader.baseParams.empty = empty;
                },
                null,
                {
                    single : true
                });
            tree.getRootNode().reload();
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />
        
    <ext:Button runat="server" Text="Filter with no nodes">
        <Listeners>
            <Click Handler="filter(TreePanel1, true);" />
        </Listeners>
    </ext:Button>

    <ext:Button runat="server" Text="Filter with some nodes">
        <Listeners>
            <Click Handler="filter(TreePanel1, false);" />
        </Listeners>
    </ext:Button>

    <ext:TreePanel 
        ID="TreePanel1" 
        runat="server"
        Title="TreePanel" 
        AutoHeight="true" 
        RootVisible="false">
        <Loader>
            <ext:PageTreeLoader OnNodeLoad="NodeLoad">
                <BaseParams>
                    <ext:Parameter Name="empty" Value="false" Mode="Raw" />
                </BaseParams>
            </ext:PageTreeLoader>
        </Loader>
        <Root>
            <ext:AsyncTreeNode NodeID="0" Text="Root" />
        </Root>
    </ext:TreePanel>
</body>
</html>

**John_Writers** · Mar 29, 2012, 1:33 PM

Thanks Daniil,
but is there a method to replace the html instead to add? With more calls, the html added to previous.

Thanks

**Daniil** · Mar 29, 2012, 1:34 PM

I don't understand, please clarify.

**John_Writers** · Mar 29, 2012, 4:31 PM

With insertHTML you append html code to previous html code and with two or more calls the result is "No itemsNo itemsNo items" ...
I need a method to clear html for each call.

Sorry for my english, I hope that is is clear.

**Daniil** · Mar 29, 2012, 4:34 PM

Thanks for the clarification, I understand now.

Please try to replace the markEmpty function with this one:

var markEmpty = function (tree) {
    if (!Ext.fly("spanNoItems")) {
        tree.body.child(".x-tree-root-node").insertHtml("afterEnd", "<span id='spanNoItems'>No items</span>");
    }
};

Thread: [CLOSED] [1.3] Problem with rootVisible on TreePanel

Thread Tools

Search Thread

Display

[CLOSED] [1.3] Problem with rootVisible on TreePanel

Similar Threads

[CLOSED] TreePanel CSS Problem

[CLOSED] TreePanel RootVisible

Problem with TreePanel Selection[1.0]

[CLOSED] [1.0] TreeGrid, lazy load, and RootVisible="true"

[CLOSED] TreePanel RootVisible Question

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] [1.3] Problem with rootVisible on TreePanel

[CLOSED] [1.3] Problem with rootVisible on TreePanel

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us