[CLOSED] TreePanel refresh problem

  1. #1

    [CLOSED] TreePanel refresh problem

    Hello,

    Please investigate the code below. I need to refresh dynamically created TreePanel items of the MainMenuPanel (defined in markup) in certain circumstances. When I hit "Refresh", tree panels are refreshed but the MenuGroup 1 initially shows no child nodes. Switching to Menu Group 2 and then Menu Group 1, child nodes become visible.

    What is wrong with the code or the way I follow?

    Thanks.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                BuildMenu();      
            }        
        }
        protected void RefreshMenu(object sender, DirectEventArgs e)
        {
            BuildMenu();
        }
        protected void BuildMenu()
        {
            Ext.Net.TreePanel MenuGroup1 = new Ext.Net.TreePanel();
            MenuGroup1.ID = "Group1";
            MenuGroup1.RootVisible = false;
            MenuGroup1.SetTitle("Menu Group 1");
            MenuGroup1.UseArrows = true;
            MenuGroup1.Icon = Icon.Cog;
            Ext.Net.TreeView Tview = new Ext.Net.TreeView();
            Tview.ToggleOnDblClick = false;
            MenuGroup1.View.Add(Tview);
    
            Ext.Net.Node MenuRoot1 = new Ext.Net.Node();
            MenuRoot1.NodeID = "Group1Root";
            MenuRoot1.Text = "Group1Root";
            MenuRoot1.Leaf = false;
            MenuGroup1.Root.Add(MenuRoot1);        
    
            Ext.Net.Node ManagementNode = new Ext.Net.Node();
            ManagementNode.Leaf = true;
            ManagementNode.Text = "Setting 01";
            ManagementNode.NodeID = "Setting01";
            MenuRoot1.Children.Add(ManagementNode);
            MenuGroup1.AddTo(MainMenuPanel);
    
            Ext.Net.TreePanel MenuGroup2 = new Ext.Net.TreePanel();
            MenuGroup2.ID = "Group2";
            MenuGroup2.RootVisible = false;
            MenuGroup2.SetTitle("Menu Group 2");
            MenuGroup2.UseArrows = true;
            MenuGroup2.Icon = Icon.Cog;
            Ext.Net.TreeView Tview2 = new Ext.Net.TreeView();
            Tview2.ToggleOnDblClick = false;
            MenuGroup2.View.Add(Tview2);
    
            Ext.Net.Node MenuRoot2 = new Ext.Net.Node();
            MenuRoot2.NodeID = "Group2Root";
            MenuRoot2.Text = "Group2Root";
            MenuRoot2.Leaf = false;
            MenuGroup2.Root.Add(MenuRoot2);
    
            Ext.Net.Node ManagementNode2 = new Ext.Net.Node();
            ManagementNode2.Leaf = true;
            ManagementNode2.Text = "Setting 02";
            ManagementNode2.NodeID = "Setting02";
            MenuRoot2.Children.Add(ManagementNode2);
            MenuGroup2.AddTo(MainMenuPanel);        
        }
    
    </script>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        <div>
        <ext:Viewport ID="MyViewport" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" ID="MainMenuPanel" Region="West" Layout="AccordionLayout" Collapsible="true" Split="true" Title="Menu" Width="200" MinWidth="200" MaxWidth="400" >  
                    <TopBar>
                        <ext:Toolbar runat="server" ID="MainMenuTopBar">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFill1" runat="server"></ext:ToolbarFill>
                                <ext:Button ID="BtnRefresMenu" runat="server" Icon="ArrowRefresh">
                                    <DirectEvents>
                                        <Click OnEvent="RefreshMenu">
                                        </Click>                                    
                                    </DirectEvents>
                                    <ToolTips>
                                        <ext:ToolTip runat="server" Title="Refresh" Html="Refresh..."></ext:ToolTip>
                                    </ToolTips>
                                </ext:Button> 
                            </Items>
                        </ext:Toolbar>
                    </TopBar>              
                    <LayoutConfig>
                        <ext:AccordionLayoutConfig OriginalHeader="true" Animate="true" ActiveOnTop="true" />
                    </LayoutConfig>
                </ext:Panel>      
            </Items>            
        </ext:Viewport>           
        </div>
        </form>
    </body>
    </html>      
        </form>
    </body>
    </html>
    Last edited by Daniil; Sep 16, 2013 at 3:51 PM. Reason: [CLOSED]
  2. #2
    Hello!

    I think it's not good idea to recreate controls without an important reason. In your case it's better just refresh nodes. Try the following approach:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                BuildMenu();      
            }        
        }
        protected void RefreshMenu(object sender, DirectEventArgs e)
        {
            Ext.Net.Node MenuRoot1 = new Ext.Net.Node();
            MenuRoot1.NodeID = "Group1Root";
            MenuRoot1.Text = "Group1Root";
            MenuRoot1.Leaf = false;
    
            Ext.Net.Node ManagementNode = new Ext.Net.Node();
            ManagementNode.Leaf = true;
            ManagementNode.Text = "Another setting 01";
            ManagementNode.NodeID = "Setting01";
            MenuRoot1.Children.Add(ManagementNode);
            X.GetCmp<TreePanel>("Group1").SetRootNode(MenuRoot1);
        }
    
        protected void BuildMenu()
        {
            MainMenuPanel.Items.Clear();
            Ext.Net.TreePanel MenuGroup1 = new Ext.Net.TreePanel();
            MenuGroup1.ID = "Group1";
            MenuGroup1.RootVisible = false;
            MenuGroup1.SetTitle("Menu Group 1");
            MenuGroup1.UseArrows = true;
            MenuGroup1.Icon = Icon.Cog;
            Ext.Net.TreeView Tview = new Ext.Net.TreeView();
            Tview.ToggleOnDblClick = false;
            MenuGroup1.View.Add(Tview);
    
            Ext.Net.Node MenuRoot1 = new Ext.Net.Node();
            MenuRoot1.NodeID = "Group1Root";
            MenuRoot1.Text = "Group1Root";
            MenuRoot1.Leaf = false;
            MenuGroup1.Root.Add(MenuRoot1);
    
            Ext.Net.Node ManagementNode = new Ext.Net.Node();
            ManagementNode.Leaf = true;
            ManagementNode.Text = "Setting 01";
            ManagementNode.NodeID = "Setting01";
            MenuRoot1.Children.Add(ManagementNode);
            MenuGroup1.AddTo(MainMenuPanel);
    
            Ext.Net.TreePanel MenuGroup2 = new Ext.Net.TreePanel();
            MenuGroup2.ID = "Group2";
            MenuGroup2.RootVisible = false;
            MenuGroup2.SetTitle("Menu Group 2");
            MenuGroup2.UseArrows = true;
            MenuGroup2.Icon = Icon.Cog;
            Ext.Net.TreeView Tview2 = new Ext.Net.TreeView();
            Tview2.ToggleOnDblClick = false;
            MenuGroup2.View.Add(Tview2);
    
            Ext.Net.Node MenuRoot2 = new Ext.Net.Node();
            MenuRoot2.NodeID = "Group2Root";
            MenuRoot2.Text = "Group2Root";
            MenuRoot2.Leaf = false;
            MenuGroup2.Root.Add(MenuRoot2);
    
            Ext.Net.Node ManagementNode2 = new Ext.Net.Node();
            ManagementNode2.Leaf = true;
            ManagementNode2.Text = "Setting 02";
            ManagementNode2.NodeID = "Setting02";
            MenuRoot2.Children.Add(ManagementNode2);
            MenuGroup2.AddTo(MainMenuPanel);
        }
     
    </script>
     
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Ext.NET Examples</title>
    </head>
    <body>
        <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server"/>
        <div>
        <ext:Viewport ID="MyViewport" runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" ID="MainMenuPanel" Region="West" Layout="AccordionLayout" Collapsible="true" Split="true" Title="Menu" Width="200" MinWidth="200" MaxWidth="400" >  
                    <TopBar>
                        <ext:Toolbar runat="server" ID="MainMenuTopBar">
                            <Items>
                                <ext:ToolbarFill ID="ToolbarFill1" runat="server"></ext:ToolbarFill>
                                <ext:Button ID="BtnRefresMenu" runat="server" Icon="ArrowRefresh">
                                    <DirectEvents>
                                        <Click OnEvent="RefreshMenu">
                                        </Click>                                    
                                    </DirectEvents>
                                    <ToolTips>
                                        <ext:ToolTip runat="server" Title="Refresh" Html="Refresh..."></ext:ToolTip>
                                    </ToolTips>
                                </ext:Button> 
                            </Items>
                        </ext:Toolbar>
                    </TopBar>              
                    <LayoutConfig>
                        <ext:AccordionLayoutConfig OriginalHeader="true" Animate="true" ActiveOnTop="true" />
                    </LayoutConfig>
                </ext:Panel>      
            </Items>            
        </ext:Viewport>           
        </div>
        </form>
    </body>
    </html>      
        </form>
    </body>
    </html>
    Also, I hope this sample will be helpful: https://examples2.ext.net/#/TreePane...h_Static_Tree/
  3. #3
    Hi,

    Also please note that the AddTo method (and other "render" methods should be used during an AJAX request only, i.e. a DirectEvent or a DirectMethod). I am talking about this:
    MenuGroup1.AddTo(MainMenuPanel);
    It should be replaced with
    if (X.IsAjaxRequest)
    {
        MenuGroup1.AddTo(MainMenuPanel);
    }
    else
    {
        MainMenuPanel.Items.Add(MenuGroup1);
    }
    Regarding the initial problem.

    I think @Baidaly is right that it is better to refresh only the nodes, but just a suggestion if you really need to re-render the things.

    Removing all the items prior to adding appears to help.
    if (X.IsAjaxRequest)
     {
        MainMenuPanel.RemoveAll();
    }
  4. #4
    Hello,

    Thank you both for your support. The examples helped a lot.
    I think I have to re-create controls because this is a user rights dependent menu group. A tree panel (menu group) may be completely unassigned or there may be new menu groups added to menu panel. Perhaps refreshing the nodes for groups which stay intact might be implemented but I guess that would increase complexity. I would like to know your comments if any. You can mark as closed. Thank you.
  5. #5
    Quote Originally Posted by bayoglu View Post
    Perhaps refreshing the nodes for groups which stay intact might be implemented but I guess that would increase complexity. I would like to know your comments if any.
    Well, if re-rendering is easy in your scenario, it is OK. Just it might be good to clear the container before adding components to it.
    MainMenuPanel.RemoveAll();
  6. #6
    Hello @Daniil, I am reoving all controls before re-adding as you said. Thanks again.
  7. #7
    Quote Originally Posted by Daniil View Post
    Well, if re-rendering is easy in your scenario, it is OK. Just it might be good to clear the container before adding components to it.
    MainMenuPanel.RemoveAll();
    Hello,
    I have almost the same issue. After calling RemoveAll(), I call my function so as to recreate the tree panel but it returns an empty control.
    Below is my code

    public void PopulateTree()
            {
                Ext.Net.Node root = new Ext.Net.Node()
                {
                    Text = "Categories",                  
                };
                
                TreePanel1.Root.Add(root);                 
               
                var data = RequestCategoriesController.GetRequestCategories();
    
                foreach (DataLayer.RequestCategory item in data.Where(c => c.ParentFK == null))
                {
                    AddNode(root.Children, item, data);
                }           
            }
    
            private void AddNode(NodeCollection nodes, DataLayer.RequestCategory currentCategory, List<DataLayer.RequestCategory> items)
            {
                Node newNode = new Node()
                {
                    NodeID = currentCategory.SN.ToString(),
                    Text = currentCategory.Name,
                    Expanded = true
                };
                newNode.CustomAttributes.Add(new ConfigItem("SN", currentCategory.SN.ToString()));
                newNode.CustomAttributes.Add(new ConfigItem("Name", currentCategory.Name));
                newNode.CustomAttributes.Add(new ConfigItem("ParentFK", currentCategory.ParentFK.ToString()));
                newNode.CustomAttributes.Add(new ConfigItem("IsActive", currentCategory.IsActive.ToString()));
                nodes.Add(newNode);
                var children = items.Where(x => x.ParentFK == currentCategory.SN);
                
                if (children.Count() == 0)
                    newNode.Leaf = true;
    
                foreach (var child in children)
                {
                    AddNode(newNode.Children, child, items);
                }           
            }
    
    
     public override void CommandReload(object sender, DirectEventArgs e)
            {
                if (X.IsAjaxRequest)
                {
                    TreePanel1.RemoveAll();
                }
            }
    
    
    protected void TreePanel1_PreRender(object sender, EventArgs e)
            {
    
                if (X.IsAjaxRequest)                            
                    PopulateTree();             
                else
                    PopulateTree(); 
            }
    //Code Behind

    <ext:TreePanel ID="TreePanel1" OnPreRender="TreePanel1_PreRender"
                        runat="server"            
                        ForceFit="true"
                        Region="Center"                                                
                        UseArrows="true"
                        RootVisible="false"
                        MultiSelect="true"
                        SingleExpand="true"                    
                        FolderSort="true">                                     
                        <Listeners>
                            <ItemClick Fn="getSN"/>                       
                        </Listeners>                   
                        <Store>                        
                            <ext:TreeStore ID="TreeStore1" runat="server" OnLoad="TreeStore1_Load" >
                                <Proxy>
                                    <ext:PageProxy />
                                </Proxy>                           
                                
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>                        
                                        <ext:ModelField Name="SN"/>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="ParentFK" /> 
                                        <ext:ModelField Name="IsActive" />                        
                                    </Fields>
                                    </ext:Model>
                                </Model>                           
                            </ext:TreeStore>
                        </Store>
    
                        <ColumnModel>
                            <Columns>                                                      
                                <ext:TreeColumn OnPreRender="Unnamed_PreRender"
                                    runat="server"
                                    Text="<%$Resources:DBFields , RequestCategories_Name %>"                                                                                            
                                    Sortable="true"
                                    DataIndex="Name">  
                                    <Renderer*Fn="Link"/>
                                    </ext:TreeColumn>                           
                                <ext:CheckColumn ID="Column3"
                                    runat="server"
                                    Text="<%$Resources:DBFields , RequestCategories_IsActive %>"
                                    Sortable="true"                                
                                    DataIndex="IsActive" />
                            </Columns>
                        </ColumnModel>
                    </ext:TreePanel>
    Do you have any idea why is this happening?

    Thanks in advance
    Last edited by Daniil; Sep 16, 2013 at 3:47 PM. Reason: Please use [CODE] tags
  8. #8
    Hi @S.KARATHANASIS,

    I think you are facing a bit different problem. Please start a new forum thread. If you feel the threads are related, please feel free to cross-link between the two.

Similar Threads

  1. [CLOSED] Refresh TreePanel
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Nov 13, 2012, 5:52 AM
  2. TreePanel Refresh
    By brucelee15987 in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2011, 11:23 AM
  3. Replies: 2
    Last Post: Jul 30, 2010, 12:37 AM
  4. Replies: 1
    Last Post: Mar 24, 2010, 5:32 PM
  5. Refresh Treepanel
    By Maia in forum 1.x Help
    Replies: 2
    Last Post: Jan 06, 2010, 9:02 AM

Posting Permissions