PDA

View Full Version : Reload TreePanel with commands from codebehind


wilmercastrillon
Jun 24, 2021, 7:18 PM
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);
}
}
}
fabricio.murta
Jun 25, 2021, 3:47 AM
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!
wilmercastrillon
Jun 25, 2021, 1:26 PM
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:
25545

But the actual result is:
25544


Browser: Google Chrome
Framework: .Net Core 3.1
Version: Ext.Net 7.2
fabricio.murta
Jul 06, 2021, 9:50 AM
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, Children[var] and [var]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!
wilmercastrillon
Jul 07, 2021, 9:44 PM
Works correctly
Thank you so much
fabricio.murta
Jul 08, 2021, 5:47 AM
Glad it helped, and thanks for the feedback!