What's New?

How to refresh a tree panel by Listern or other method?

  1. #1
    Dec 30, 2008, 12:39 AM

    How to refresh a tree panel by Listern or other method?



    The tree node is generated by code behind
    <ext:TreePanel ID="treePanel" runat="server" Icon="Anchor" BodyBorder="false" Title="????"
      AutoScroll="true" Width="250" Collapsed="False" CollapseFirst="True" HideParent="False"
      RootVisible="False" BodyStyle="padding-left:10px">
      <Tools>
        <%--call RefreshMenu method to refresh it , but i failed....--%>
       <ext:Tool Type="Refresh" Qtip="Refresh" Handler="Coolite.AjaxMethods.CountMenu()" />
      </Tools>
     </ext:TreePanel>
    code behind:

protected void Page_Load(object sender, EventArgs e)
  {
   if(!IsPostBack &amp;&amp; !Ext.Ext.IsAjaxRequest)
   {
     BindTreeMenu(null, null);
   }
  }


  [AjaxMethod]
  public void BindTreeMenu(string nenuKey, Ext.TreeNode root)
  {
        // some bind code for treePanel
   }
  [AjaxMethod]
  public void RefreshMenu()
  {
   //Ext.ScriptManager sm = (Ext.ScriptManager)this.Master.FindControl("scriptManager");
   //this.scriptManager.AddScript("alert('Nodes count: {0}');", this.treePanel.Root.Count);
   

    this.treePanel.Root.Clear();
    //call Reload() to refresh ,but a script error will occured. Anyone have some solutions for this??
   this.treePanel.Reload();
  }
  2. #2
    Dec 30, 2008, 7:21 AM

    RE: How to refresh a tree panel by Listern or other method?

    Hi,

    I wrote simple example which shows how to reload static tree. Is it what you need?

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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="Head2" runat="server">
    <title></title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack &amp;&amp; !Ext.IsAjaxRequest)
            {
                this.BuildTree(TreePanel1.Root);
            }
        }
        
        private Coolite.Ext.Web.TreeNodeCollection BuildTree(Coolite.Ext.Web.TreeNodeCollection nodes)
        {
            if(nodes == null)
            {
                nodes = new Coolite.Ext.Web.TreeNodeCollection();
            }
            
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            root.Text = "Root";
            nodes.Add(root);

            string prefix = DateTime.Now.Second + "_";
            for (int i = 0; i < 10; i++)
            {
                Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
                node.Text = prefix + i;
                root.Nodes.Add(node);
            }

            return nodes;
        }

        [AjaxMethod]
        public string RefreshMenu()
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            return nodes.ToJson();
        }
    </script>
    
    <script type="text/javascript">
        function refreshTree(tree) {
            Coolite.AjaxMethods.RefreshMenu({
                success: function(result) {
                    var nodes = eval(result);
                    tree.root.ui.remove();
                    tree.initChildren(nodes);
                    tree.root.render();
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
        
        <ext:TreePanel ID="TreePanel1" runat="server" 
            Icon="Anchor" 
            BodyBorder="false" 
            Title="Tree"
            AutoScroll="true" 
            Width="250" 
            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 30, 2008, 8:46 AM

    RE: How to refresh a tree panel by Listern or other method?

    Thanks valdsch a lot!!

    but is it the recommended solution?

    I just revised yr code like this, but no respondence got after clicked. what i need is wanna call a server-side method to refresh the treepanel except client-side code like javascript. Is it possible or not? If it is, which is the best solution for this situation? Thanks valdsch much again, you r so welcome.

    <%@ Page Language="C#" %>
<%@ Import Namespace="Coolite.Ext.WEb" %>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" 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="Head2" runat="server">
    <title></title>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack &amp;&amp; !Ext.IsAjaxRequest)
            {
                this.BuildTree(TreePanel1.Root);
            }
        }
        
        private Coolite.Ext.Web.TreeNodeCollection BuildTree(Coolite.Ext.Web.TreeNodeCollection nodes)
        {
            if(nodes == null)
            {
                nodes = new Coolite.Ext.Web.TreeNodeCollection();
            }
            
            Coolite.Ext.Web.TreeNode root = new Coolite.Ext.Web.TreeNode();
            root.Text = "Root";
            nodes.Add(root);

            string prefix = DateTime.Now.Second + "_";
            for (int i = 0; i < 10; i++)
            {
                Coolite.Ext.Web.TreeNode node = new Coolite.Ext.Web.TreeNode();
                node.Text = prefix + i;
                root.Nodes.Add(node);
            }

            return nodes;
        }

        [AjaxMethod]
        public string RefreshMenu()
        {
            //before
            //Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            //return nodes.ToJson();

            //now
            Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            //clear root node collection before add new one.
            this.TreePanel1.Root.Clear();
            this.TreePanel1.Root.AddRange(nodes);
            return nodes.ToJson();
        }
    </script>
    
    <script type="text/javascript">
        function refreshTree(tree) {
            Coolite.AjaxMethods.RefreshMenu({
                success: function(result) {
                    var nodes = eval(result);
                    tree.root.ui.remove();
                    tree.initChildren(nodes);
                    tree.root.render();
                }
            });
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
        
        <ext:TreePanel ID="TreePanel1" runat="server" 
            Icon="Anchor" 
            BodyBorder="false" 
            Title="Tree"
            AutoScroll="true" 
            Width="250" 
            Collapsed="False" 
            CollapseFirst="True" 
            HideParent="False"
            RootVisible="False" 
            BodyStyle="padding-left:10px">
          <Tools>            
           <%--<ext:Tool Type="Refresh" Qtip="Refresh" Handler="refreshTree(#{TreePanel1});" />--%>
           <%--call ajax method RefreshMenu() directly--%>
           <ext:Tool Type="Refresh" Qtip="Refresh" Handler="Coolite.AjaxMethods.RefreshMenu();" />
          </Tools>
         </ext:TreePanel>
    </form>
</body>
</html>
  4. #4
    Dec 30, 2008, 9:05 AM

    RE: How to refresh a tree panel by Listern or other method?

    Hi,


    Now the TreePanel doesn't contain standart method for refresh. But my example is reload nodes from server-side (not client side).


    Your last code is incorrect. You called RereshMenu ajax method but did not analyzed response. It is not required


    this.TreePanel1.Root.Clear();
    this.TreePanel1.Root.AddRange(nodes);


    in RefreshMenu method because if you fill nodes dynamically then it will be empty for each new request. And adding to root it is not required because you return json object for client and the TreePanel object will be destroyed at the end of Page life cycle (dynamially added nodes don't saved to the viewstate).*




    Please see my example one more - it refreshed nodes from server-side calling ajax method and analyzed response on client. There is no another solution. In next release we will add mechanism for reload but it will use same mechanism (just many actions will be hidden for end developer)




  5. #5
    Dec 31, 2008, 3:47 AM

    RE: How to refresh a tree panel by Listern or other method?

    That's greate!! it works perfectly.

    But the method of initChildren() seems not included or publiced in EXT2.2, I can not find it whatever in Panel or TreePanel component.

     function refreshTree(tree) {
            Coolite.AjaxMethods.RefreshMenu({
                success: function(result) {
     //alert(result);
                    var nodes = eval(result);
                    tree.root.ui.remove();
                    tree.initChildren(nodes);
                    tree.root.render();
                }
            });
  6. #6
    Dec 31, 2008, 3:51 AM

    RE: How to refresh a tree panel by Listern or other method?

    yes, initChildren it is Coolite method which we added to the TreePanel

    *
  7. #7
    May 28, 2009, 5:57 PM

    RE: How to refresh a tree panel by Listern or other method?

    I've spent the better part of a day on this one and I can say with some certainty that this has a problem in both 0.7 and 0.8. Inside a JS file i have the following. You will notice the difference in this and the stock example is that I am including a extra parameter.

    Does not work. Success does not fire!
    function refreshTree(tree, value) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        failure: function() {
            alert('Aww Shcucks!');
        },
        success: function(result) {
            alert(result);
            var nodes = eval(result);
            tree.root.ui.remove();
            tree.initChildren(nodes);
            tree.root.render();
        },
        params: { PayPeriod: value }
    });
}

    Does work! Success will fire!
    function refreshTree(tree, value) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        failure: function() {
            alert('Aww Shcucks!');
        },
        success: alert('hello world'),
        params: { PayPeriod: value }
    });
}

    Does not work. Success will not fire.
    function refreshTree(tree, value) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        failure: function() {
            alert('Aww Shcucks!');
        },
        success: alert(result),
        params: { PayPeriod: value }
    });
}





  8. #8
    May 28, 2009, 8:15 PM

    RE: How to refresh a tree panel by Listern or other method?

    I took your sample and tested it. The problem occures when you try and send a parameter back to the function. The parameter gets to the function but the response never fires sucess with the responseText.

    Yes:
    function refreshTree(tree) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        success: function(result) {
            var nodes = eval(result);
            tree.root.ui.remove();
            tree.initChildren(nodes);
            tree.root.render();
        }
    });
}
        [AjaxMethod]
        public string RefreshMenu()
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            return nodes.ToJson();
        }






    Yes:
    function refreshTree(tree) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        params: {PayPeriod:'foobar'},
        success: function(result) {
            var nodes = eval(result);
            tree.root.ui.remove();
            tree.initChildren(nodes);
            tree.root.render();
        }
    });
}
            [AjaxMethod]
        public string RefreshMenu()
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            return nodes.ToJson();
        }




    No:
    function refreshTree(tree) {
    Coolite.AjaxMethods.RefreshMenu(
    {
        params: {PayPeriod:'foobar'},
        success: function(result) {
            var nodes = eval(result);
            tree.root.ui.remove();
            tree.initChildren(nodes);
            tree.root.render();
        }
    });
}


        [AjaxMethod]
        public string RefreshMenu(string PayPeriod)
        {
            Coolite.Ext.Web.TreeNodeCollection nodes = this.BuildTree(null);
            return nodes.ToJson();
        }



    PS. grats on the realse of 0.8 ... it just keeps getting better!!!!


  9. #9
    May 28, 2009, 8:18 PM

    RE: How to refresh a tree panel by Listern or other method?

    Clarification on my PS comment.

    No ... i wasn't trying to be a smartass. Although i am posting about a bug i really mean that Coolite is continually improving into a great platform. Thanks to Greg and Vlad!

Similar Threads

  1. Refresh static Tree error
    By Chris in forum 1.x Help
    Replies: 5
    Last Post: Oct 12, 2011, 8:04 AM
  2. [CLOSED] Tree panel should refresh and the selected node should remain.
    By Shanth in forum 1.x Legacy Premium Help
    Replies: 11
    Last Post: Oct 07, 2011, 9:14 AM
  3. [CLOSED] .swf animation does not work calling a method after tree panel node is clicked
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 03, 2010, 3:08 PM
  4. 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
  5. How to refresh a tree panel by serverside method?
    By mine1202 in forum 1.x Help
    Replies: 3
    Last Post: Jan 03, 2009, 10:41 PM

Posting Permissions