PDA

View Full Version : [CLOSED] Tree clear nodes



cwolcott
Nov 22, 2015, 11:28 PM
What am I not understanding?

The tree is initially populated with 10 items. I can press the refresh button and have 10 new items created via a DirectMethod and shown in the tree. If I press the Minus button I call the DirectMethod only creating the root node. But when I populate the tree nothing is shown (GOOD), but a horizontal scroll bar is shown (BAD).

What am I doing incorrectly?



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

private Ext.Net.NodeCollection BuildTree(Ext.Net.NodeCollection nodes, int nodeCount)
{
if (nodes == null)
{
nodes = new Ext.Net.NodeCollection();
}

Ext.Net.Node root = new Ext.Net.Node();
root.Text = "Root";
root.Expanded = false;
root.Leaf = true;
nodes.Add(root);

string prefix = DateTime.Now.Second + "_";

for (int i = 0; i < nodeCount; i++)
{
Ext.Net.Node node = new Ext.Net.Node();
node.Text = prefix + i;
node.Leaf = true;
root.Children.Add(node);
}
if (root.Children != null && root.Children.Count() > 0)
{
root.Expanded = true;
root.Leaf = false;
}

return nodes;
}

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

return nodes.ToJson();
}

[DirectMethod]
public string RefershNoNodes()
{
Ext.Net.NodeCollection nodes = this.BuildTree(null, 0);

return nodes.ToJson();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Refresh Static Tree - Ext.NET Examples</title>
<script>
var refreshTree = function (tree) {
App.direct.RefreshMenu({
success: function (result) {
var nodes = eval(result);
debugger;
//if (nodes.length > 0) {
if (nodes[0].children != undefined) {
tree.setRootNode(nodes[0]);
}
else {
tree.getRootNode().removeAll();
}
}
});
};

var refershNoNodes = function (tree) {
App.direct.RefershNoNodes({
success: function (result) {
var nodes = eval(result);
debugger;
if (nodes[0].children != undefined) {
tree.setRootNode(nodes[0]);
}
else {
tree.getRootNode().removeAll(true);
}
}
});
};

</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager runat="server" />
<ext:TreePanel ID="TreePanel1" runat="server" Title="Tree" Icon="Anchor" Width="250"
Height="175" RootVisible="false" BodyPaddingSummary="0 0 0 10">
<Tools>
<ext:Tool Type="Refresh" Handler="refreshTree(#{TreePanel1});">
<ToolTips>
<ext:ToolTip runat="server" Html="Refresh" />
</ToolTips>
</ext:Tool>
<ext:Tool Type="Minus" Handler="refershNoNodes(#{TreePanel1});">
<ToolTips>
<ext:ToolTip runat="server" Html="No Nodes" />
</ToolTips>
</ext:Tool>
</Tools>
</ext:TreePanel>
</form>
</body>
</html>

Daniil
Nov 23, 2015, 10:26 AM
Hi Chris,

I am not sure why that horizontal scroll appears.

As a workaround I can suggest this:

<ext:TreePanel ... Cls="my-treepanel">

<style>
.my-treepanel .x-tree-view {
overflow-x: hidden !important;
}
</style>

cwolcott
Nov 23, 2015, 11:50 AM
Obviously the only problem with the work around is the Cls assignment needs to be conditional incase a horizontal scrollbar is needed when there are nodes populated in the tree.

Daniil
Nov 24, 2015, 4:08 PM
It might be difficult to determine that programmatically and I've came up with an idea to, maybe, change the workaround to another:

if (nodes[0].children != undefined) {
tree.setRootNode(nodes[0]);
tree.getView().getEl().setStyle({
"overflow-x": "auto"
});
} else {
tree.getRootNode().removeAll(true);
tree.getView().getEl().setStyle({
"overflow-x": "hidden"
});
}

cwolcott
Dec 06, 2015, 8:50 PM
Thanks Daniil. This works great.