Collapsing node during selection change

3 posts, 1 answers
  1. Matt
    Matt avatar
    13 posts
    Member since:
    Mar 2018

    Posted 23 Mar 2018 Link to this post

    Hello,

    I am looking to set up my TreeView in such a way as to have the previously-selected node collapse when a different node at the same level is chosen. For example, if I had a tree like this:

     

    RootNode

    |_ NodeA

    |     |_Node1

    |     |_Node2

    |_NodeB

    |     |_Node3
    |     |_Node4

     

    If I choose NodeA, NodeB (if expanded) would close, and NodeA would expand. I want to do this so that the end user doesn't get lost with many nodes expanded. Any ideas?

     

    Thanks,

    Matt

  2. Answer
    Hristo
    Admin
    Hristo avatar
    1508 posts

    Posted 26 Mar 2018 Link to this post

    Hello Matt,

    Thank you for writing. 

    Basically, you will need to find all nodes which are at the same level as the node you have selected, collapse those nodes and then expand the currently selected node. All of the nodes located at the same level are exposed by the Nodes collection of their parent node. Please check my code snippet below: 
    public partial class RadForm1 : Telerik.WinControls.UI.RadForm
    {
        private BindingList<TreeViewDataObject> data;
        public RadForm1()
        {
            InitializeComponent();
     
            this.data = new BindingList<TreeViewDataObject>();
     
            int id = 0;
            for (int i = 1; i <= 5; i += 1)
            {
                id++;
                TreeViewDataObject root = new TreeViewDataObject()
                {
                    Id = id,
                    ParentId = -1,
                    Name = "Root: " + i
                };
     
                this.data.Add(root);
     
                for (int j = 1; j <= 3; j++)
                {
                    id++;
                    TreeViewDataObject child = new TreeViewDataObject()
                    {
                        Id = id,
                        ParentId = root.Id,
                        Name = "Child: " + id
                    };
     
                    this.data.Add(child);
     
                    for (int K = 1; K <= 5; K++)
                    {
                        id++;
     
                        TreeViewDataObject c = new TreeViewDataObject()
                        {
                            Id = id,
                            ParentId = child.Id,
                            Name = "Child: " + id
                        };
     
                        this.data.Add(c);
                    }
                }
            }
     
            this.radTreeView1.DataSource = this.data;
            this.radTreeView1.DisplayMember = "Name";
            this.radTreeView1.ParentMember = "ParentId";
            this.radTreeView1.ChildMember = "Id";
            this.radTreeView1.RelationBindings.Add(new RelationBinding(this.data, "Name", "ParentId", "Id"));
     
            this.radTreeView1.SelectedNodeChanged += RadTreeView1_SelectedNodeChanged;
        }
     
        private void RadTreeView1_SelectedNodeChanged(object sender, RadTreeViewEventArgs e)
        {
            RadTreeNodeCollection siblings = e.Node.Parent != null ? e.Node.Parent.Nodes : this.radTreeView1.Nodes;
     
            foreach (var item in siblings)
            {
                if (item == e.Node)
                {
                    item.Expanded = true;
     
                }
                else
                {
                    item.Expanded = false;
                }
            }
        }
    }
    public class TreeViewDataObject
    {
        public int Id { get; set; }
     
        public int ParentId { get; set; }
     
        public string Name { get; set; }
    }

    I am also attaching a short video showing the result on my end. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Matt
    Matt avatar
    13 posts
    Member since:
    Mar 2018

    Posted 26 Mar 2018 in reply to Hristo Link to this post

    Works great. Thanks!
Back to Top