Reload TreePanel with commands from codebehind

  1. #1

    Reload TreePanel with commands from codebehind

    I need reload a TreePanel, but the 'prepareToolbar' fails on reload, the 'record.data.type' are undefined, why?

    @page
    @model Project.Pages.ReloadTreePanelModel
    @{
        Layout = null;
    }
    
    <head>
        <script type="text/javascript">
            var gridCommand = [{
                xtype: "button",
                text: "button 1",
                command: "commandbutton1",
            }, {
                xtype: "button",
                text: "button 2",
                command: "commandbutton2",
            }];
    
            var PrepareCommands = function (object, toolbar, rowIndex, record) {
                if (record.data.depth == 0) {
                    toolbar.items.items[0].hide();
                    toolbar.items.items[1].hide();
                }
    
                if (record.data.type == '1') {
                    toolbar.items.items[1].hide();
                } else if (record.data.type == '2') {
                    toolbar.items.items[0].hide();
                }
            };
    
            var columnModelTree = [{
                flex: 1,
                xtype: "treecolumn",
                dataIndex: "text",
            }, {
                width: 150,
                xtype: "commandcolumn",
                commands: gridCommand,
                prepareToolbar: PrepareCommands
            }];
        </script>
    </head>
    
    
    <body>
        <ext-viewport layout="Fit">
            <items>
                <ext-treePanel id="MyTreePanel" title="TreePanel" flex="1" frame="true" scrollable="true" margin="5" ui="Info">
                    <tbar>
                        <ext-toolbar>
                            <items>
                                <ext-button id="MyButton1" text="Reload from server">
                                    <directEvents>
                                        <click pageHandler="Button_Click" method="POST" success="App.MyTreePanel.store.setRoot(Ext.decode(response.responseText).result)">
                                            <eventMask>
                                                <ext-eventMask showMask="true" msg="Cargando..." />
                                            </eventMask>
                                        </click>
                                    </directEvents>
                                </ext-button>
                                <ext-toolbarFill />
                            </items>
                        </ext-toolbar>
                    </tbar>
                    <store>
                        <ext-treeStore root="Model.Root">
                            <fields>
                                <ext-dataField name="type" />
                            </fields>
                        </ext-treeStore>
                    </store>
                    <customConfig>
                        <ext-add key="columns" value="columnModelTree" mode="Raw" />
                    </customConfig>
                </ext-treePanel>
            </items>
        </ext-viewport>
    </body>
    cs:
    using Ext.Net;
    using Ext.Net.Core;
    using Microsoft.AspNetCore.Mvc;
    using Microsoft.AspNetCore.Mvc.RazorPages;
    using System.Collections.Generic;
    
    namespace Project.Pages {
        public class ReloadTreePanelModel : PageModel {
    
            public TreeNode Root = BuildTree();
    
            public void OnGet() {
            }
    
            private static TreeNode BuildNode(string name, string type) {
                TreeNode node = new TreeNode {
                    Text = name,
                    CustomConfig = new JsObject()
                };
                node.CustomConfig.Add("type", type);
                return node;
            }
    
            private static TreeNode BuildTree() {
                var root = new TreeNode() {
                    Text = "Node 1",
                    Children = new List<TreeNode> {
                        BuildNode("Node 1", "1"),
                        BuildNode("Node 2", "2"),
                        BuildNode("Node 3", "1"),
                        BuildNode("Node 4", "2"),
                        BuildNode("Node 5", "2"),
                        BuildNode("Node 6", "1"),
                    }
                };
                return root;
            }
    
            public IActionResult OnPostButton_Click(int Nivel) {
                Root = new TreeNode() {
                    Text = "Node 1",
                    Children = new List<TreeNode> {
                        BuildNode("Node 1", "1"),
                        BuildNode("Node 2", "2"),
                        BuildNode("Node 3", "2"),
                    }
                };
                this.X().Toast("OK");
                return this.Direct(Root);
            }
        }
    }
  2. #2
    Hello @wilmercastrillon!

    Your test case works for me; when I click the "Reload from Server" button, the tree is correctly repopulated with server data. I even renamed the nodes to something else to ensure they were new -- and they were.

    Maybe there's a special step needed to reproduce the issue you are facing? A specific browser maybe?

    Looking forward to your follow-up!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello

    The field 'type' in the store is undefined after pressing the button 'Reload from server', then 'prepareToolbar' does not work properly, 'record.data.type' allways is undefined after pressing the button.

    The expected result is:
    Click image for larger version. 

Name:	Result.PNG 
Views:	14 
Size:	14.2 KB 
ID:	25545

    But the actual result is:
    Click image for larger version. 

Name:	Expected.PNG 
Views:	15 
Size:	14.5 KB 
ID:	25544


    Browser: Google Chrome
    Framework: .Net Core 3.1
    Version: Ext.Net 7.2
  4. #4
    Hello @wilmercastrillon, and sorry for the long delay to answer your follow-up!

    The problem is that you are returning from the direct method passing the tree node as an argument to this.Direct(); instead, you should actually issue the commands to update the tree. For some reason, the custom configs are not making it thru the direct request if you pass them as generic results.

    So, turn your direct method function into this:

    public IActionResult OnPostButton_Click(int Nivel) {
        var root = new TreeNode() {
            Text = "Node x1",
            Children = new List<TreeNode> {
                BuildNode("Node xx1", "1"),
                BuildNode("Node xx2", "2"),
                BuildNode("Node xx3", "2"),
            }
        };
    
        this.X().Call("App.MyTreePanel.setRootNode", root);
    
        return this.Direct();
    }
    Notice I used different tree nodes just to be sure they have been updated.

    Then clean up the button direct event block, to remove the success handler; it should then look like this:

    <ext-button id="MyButton1" text="Reload from server">
        <directEvents>
            <click pageHandler="Button_Click" method="POST">
                <eventMask>
                    <ext-eventMask showMask="true" msg="Cargando..." />
                </eventMask>
            </click>
        </directEvents>
    </ext-button>
    I don't think you'd need any other change in your test case to make it work. I couldn't triggger runtime errors as you initially reported, but the type custom config you created to the tree node was really missing. It would perhaps be better in this case if you just went ahead with your own object instead of TreeNode, as long as you keep the Leaf, [var]Children[var] and Text of the actual type.

    Let us know if the changes above are not enough to make your example work, we may have overlooked something along the way while testing options for this one.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Works correctly
    Thank you so much
  6. #6
    Glad it helped, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. TreePanel Reload
    By SaleCar in forum 3.x Help
    Replies: 0
    Last Post: Apr 15, 2015, 10:34 PM
  2. Replies: 2
    Last Post: Jul 15, 2013, 4:06 AM
  3. TreePanel.Reload
    By ankit in forum 1.x Help
    Replies: 0
    Last Post: Jun 11, 2010, 7:05 AM
  4. [CLOSED] [1.0] Reload treepanel
    By juane66 in forum 1.x Legacy Premium Help
    Replies: 10
    Last Post: Mar 29, 2010, 6:22 PM
  5. Reload TreePanel
    By Maia in forum 1.x Help
    Replies: 1
    Last Post: Jan 07, 2010, 4:39 AM

Tags for this Thread

Posting Permissions