Add new child nodes to selected node via SelectionChanged event

[dasien]

Hello,

I am trying to dynamically add to the Children collection of ITreeNodes for a given TreeNode. When the user selects the TreeNode and the SelectionChanged event is fired, i am trying to add child nodes to that selected node. Example code below, but i cannot get the TreeView to show the + to show that nodes have been added to the selected node.

Any ideas would be greatly appreciated. Code below.

using Terminal.Gui;
using Terminal.Gui.Trees;

namespace TreeviewTest
{
    public class Program
    {
        static void Main(string[] args)
        {
            // Run the application loop.
            Application.Run<MainView>();
        }
    }

    public class MainView : Toplevel
    {
        private TreeView treeView;

        public MainView()
        {
            InitializeComponent();
            
            // Add some nodes to tree.
            TreeNode root = new TreeNode("Root");


            TreeNode child1 = new TreeNode("Child1");
            TreeNode child2 = new TreeNode("Child2");
            TreeNode child3 = new TreeNode("Child3");
            
            root.Children.Add(child1);
            root.Children.Add(child2);
            root.Children.Add(child3);
            treeView.AddObject(root);
        }
        private void InitializeComponent() {
            this.treeView = new Terminal.Gui.TreeView();
            this.Width = Dim.Fill(0);
            this.Height = Dim.Fill(0);
            this.X = 0;
            this.Y = 0;
            this.Visible = true;
            this.TextAlignment = Terminal.Gui.TextAlignment.Left;
            this.treeView.Width = 36;
            this.treeView.Height = 16;
            this.treeView.X = 2;
            this.treeView.Y = 2;
            this.treeView.Visible = true;
            this.treeView.Data = "treeView";
            this.treeView.TextAlignment = Terminal.Gui.TextAlignment.Left;
            this.treeView.Style.CollapseableSymbol = '-';
            this.treeView.Style.ColorExpandSymbol = false;
            this.treeView.Style.ExpandableSymbol = '+';
            this.treeView.Style.InvertExpandSymbolColors = false;
            this.treeView.Style.LeaveLastRow = false;
            this.treeView.Style.ShowBranchLines = true;
            this.treeView.SelectionChanged += OnSelectedNodeChanged;
            this.Add(this.treeView);
        }

        private void OnSelectedNodeChanged(object? sender, SelectionChangedEventArgs<ITreeNode> e)
        {
            ITreeNode node = e.NewValue;

            if (node.Text != "Root")
            {
                node.Children.Add(new TreeNode("NewChild"));
            }

[tznind]

This use case is better supported by implementing the ITreeBuilder instead. Here is an example:

You can read more about ITreeView in Tree View Deep Dive docs

ITreeBuilder is interrogated automatically when nodes become visible and/or are expanded.

I have used object instead of TreeNode but you could do a similar thing with TreeNode class if you like. I can provide example if needed.

using Terminal.Gui;
using Terminal.Gui.Trees;


Application.Init();

var w = new Window();


var tv = new TreeView<object>(new MyTreeBuilder());
tv.Width = Dim.Fill();
tv.Height = Dim.Fill();

tv.AddObjects(new[] {
new MyObject(),
new MyObject(),
new MyObject()
});

w.Add(tv);

try
{
    Application.Run(w);
}
finally
{
    Application.Shutdown();
}

internal class MyTreeBuilder : ITreeBuilder<object>
{
    public bool SupportsCanExpand => true;

    public bool CanExpand(object toExpand)
    {
        // Anything can be expanded
        return true;
    }

    public IEnumerable<object> GetChildren(object forObject)
    {
        return new[] { new MyObject() };
    }
}

class MyObject
{
    Guid guid = Guid.NewGuid();
    public override string ToString()
    {
        return guid.ToString();
    }
}

[dasien]

Thank you very much for the example, @tznind! I can convert it to a ITreeNode, but i am curious where the event handler would go in this example. The SelectionChanged event is where i do the lookup to see if there is any data that needs to be added under this node, and i try to create those nodes there, rather than where it is in the example under GetChildren.

[tznind]

So as I understand it, your goal is to add the children dynamically as the user clicks on the branches?

This is exactly what TreeView is designed for from the ground up in code. The goal obviously is to not have to compute every tree node of every branch up front and instead only run this calculation and create objects when the node is expanded.

So by using ITreeNode you are working with the API design rather than against it.

TreeView always has a builder which it interrogates as it needs to depending on the state of expanded nodes at the time. It caches answers from the builder internally in its internal data model.

This allows you to have bottomless trees or expensive trees e.g. file system without having to pre compute.

The same thing is done in other frameworks e.g. WinForms with events as you describe but for Terminal.Gui it was built this way from first principles - hence the ITreeBuilder pattern instead of events.

You might be able to wrestle TreeView into working with the SelectionChanged event and an ITreeBuilder working together and some use of RefreshObject (clears cached tree builder answers). But its not really the way TreeView was designed.

[dasien]

Hi @tznind - thank you for the follow up. Let me make sure i understand the answer though. It sounds like you are saying that the TreeView is designed to be dynamic rather than pre-load the entirety of the tree. Perfect. It sounds like, however, that (unlike other UI frameworks) an event is not the proper place for me to expect that dynamic nature to activate. Rather, it is in the ITreeBuilder. So that, if someone clicks on a node in the tree, the GetChildren method is where the child nodes are determined.

Is my understanding correct?

[dasien]

In your example, since all nodes have CanExpand set to true, the GetChildren is fired when the node is expanded. In my application, i don't know if the node can expand until they click on the node, not the expand + sign. Is the SelectionChanged event appropriate in that case, or how would i get the GetChildren method to be called if the user just clicks on the node rather than expands it?

[tznind]

So that, if someone clicks on a node in the tree, the GetChildren method is where the child nodes are determined.

You can set public bool SupportsCanExpand => false; and TreeView will instead call GetChildren earlier. Specifically when the node is 'exposed' not expanded.

This does mean it is calling GetChildren to determine whether the + should be shown - typically resulting in 1 extra level of branch interrogation. Which might be a performance issue if you have a very long but shallow tree.

[dasien]

Update: It looks like TreeView.RefreshObject() passing in the ITreeNode which was selected did the trick. In my SelectionChanged event, i delegate the determination of whether or not there are child nodes to add to some other methods, and tell the TreeView to refresh that node with RefreshObject.