What's New?

[CLOSED] Maintaining Tree State after Refresh

  1. #1
    Dec 07, 2009, 6:44 PM

    [CLOSED] Maintaining Tree State after Refresh

    Hi,

    Is it possible to maintain the tree state after refreshing it. In the followin code, I want that after refresh, the expanded nodes remain expanded, or expand again after reload in short, maintain the state after refresh.

    <%@ 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 &amp;&amp; !X.IsAjaxRequest)
        {
            this.BuildTree(TreePanel1.Root);
        }
    }

    private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
    {
        if (nodes == null)
        {
            nodes = new Ext.Net.TreeNodeCollection();
        }
        
        Ext.Net.TreeNode root = new Ext.Net.TreeNode();
        root.Text = "Root";
        nodes.Add(root);

        string prefix = DateTime.Now.Second + "_";
        for (int i = 0; i < 10; i++)
        {
            Ext.Net.TreeNode node = new Ext.Net.TreeNode();
            node.Text = prefix + i;
            root.Nodes.Add(node);
            for (int j = 0; j < 10; j++) {
                Ext.Net.TreeNode node2 = new Ext.Net.TreeNode(prefix+j,prefix+j,Icon.Group);
                
                node2.Listeners.DblClick.Handler="Ext.Msg.alert('','"+node2.Text+"')";
                node.Nodes.Add(node2);    
            }
        }

        return nodes;
    }

    [DirectMethod]
    public string RefreshMenu()
    {
        Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);

        return nodes.ToJson();
    }
</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 id="Head2" runat="server">
    <title>SiteMap - Ext.NET Examples</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        var refreshTree = function (tree) {
            Ext.net.DirectMethods.RefreshMenu({
                success: function (result) {
                    var nodes = eval(result);
                    tree.initChildren(nodes);
                }
            });
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:TreePanel 
            ID="TreePanel1" 
            runat="server" 
            Icon="Anchor" 
            Title="Tree"
            AutoScroll="true" 
            Width="250" 
             UseArrows="true"
              Lines="false"
            Collapsed="False" 
            CollapseFirst="True" 
            HideParent="False"
            RootVisible="False" 
            BodyStyle="padding-left:10px">
            <Tools>            
                <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
            </Tools>
         </ext:TreePanel>
    </form>
</body>
</html>
  2. #2
    Dec 08, 2009, 7:28 AM

    RE: [CLOSED] Maintaining Tree State after Refresh

    Hi,

    1. All nodes (at least expanded have to have the sane ids between requests )
    2. You have small bug: all subnodes in each top node has the same id. If you exapnd two nodes and move mouse over subnodes then you will see several nodes selection. NodeID must be unique

    The see the following example
    <%@ 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 &amp;&amp; !X.IsAjaxRequest)
        {
            this.BuildTree(TreePanel1.Root);
        }
    }

    private Ext.Net.TreeNodeCollection BuildTree(Ext.Net.TreeNodeCollection nodes)
    {
        if (nodes == null)
        {
            nodes = new Ext.Net.TreeNodeCollection();
        }
        
        Ext.Net.TreeNode root = new Ext.Net.TreeNode();
        root.Text = "Root";
        nodes.Add(root);

        string prefix = DateTime.Now.Second + "_";
        for (int i = 0; i < 10; i++)
        {
            Ext.Net.TreeNode node = new Ext.Net.TreeNode();
            node.NodeID = "Node_" + i;
            node.Text = prefix + i;
            root.Nodes.Add(node);
            for (int j = 0; j < 10; j++) {
                Ext.Net.TreeNode node2 = new Ext.Net.TreeNode("Node" + i + "_" + j, prefix + i + "_" + j, Icon.Group);
                
                node2.Listeners.DblClick.Handler="Ext.Msg.alert('','"+node2.Text+"')";
                node.Nodes.Add(node2);    
            }
        }

        return nodes;
    }

    [DirectMethod]
    public string RefreshMenu()
    {
        Ext.Net.TreeNodeCollection nodes = this.BuildTree(null);

        return nodes.ToJson();
    }
</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 id="Head2" runat="server">
    <title></title>
    <script type="text/javascript">
        var refreshTree = function (tree) {
            var expNodes = [];
            tree.getRootNode().cascade(function(node){
                if(node.isExpanded()){
                    expNodes.push(node.id);
                }
            });
            
            Ext.net.DirectMethods.RefreshMenu({
                success: function (result) {
                    var nodes = eval(result);
                    tree.initChildren(nodes);
                    
                    for(var i=0, l=expNodes.length;i<l;i++){
                        var node = tree.getNodeById(expNodes[i]);
                        if(node){
                            node.expand(false, false);
                        }
                    }
                }
            });
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:TreePanel 
            ID="TreePanel1" 
            runat="server" 
            Icon="Anchor" 
            Title="Tree"
            AutoScroll="true" 
            Width="250" 
             UseArrows="true"
              Lines="false"
            Collapsed="False" 
            CollapseFirst="True" 
            HideParent="False"
            RootVisible="False" 
            BodyStyle="padding-left:10px">
            <Tools>            
                <ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />
            </Tools>
         </ext:TreePanel>
    </form>
</body>
</html>
  3. #3
    Dec 08, 2009, 6:48 PM

    RE: [CLOSED] Maintaining Tree State after Refresh

    Awesome... Thanks!!!

    Quick question in Yes and No....

    Can Row Expander now have any control? I see Grid and List View in example... but I suppose it cud render any control...
  4. #4
    Dec 08, 2009, 6:57 PM

    RE: [CLOSED] Maintaining Tree State after Refresh

    Hi,

    Yes, you can use dynamic control rendering or use shared component of the RowExander (Examples Explorer: GridPanel/RowExpander/Shared Component)

Similar Threads

  1. [CLOSED] Click tree note to refresh gridpanel...
    By gs_user in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 08, 2012, 2:41 AM
  2. [CLOSED] TreePanel refresh tree node
    By boris in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 16, 2011, 10:32 AM
  3. Refresh static Tree error
    By Chris in forum 1.x Help
    Replies: 5
    Last Post: Oct 12, 2011, 8:04 AM
  4. [CLOSED] TreePanel state: re-select node after refresh
    By ljcorreia in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Mar 24, 2010, 12:27 PM
  5. How to refresh tree using CodeBehind and VB?
    By dbassett74 in forum 1.x Help
    Replies: 0
    Last Post: Apr 21, 2009, 2:47 PM

Posting Permissions