New to Telerik UI for WinForms? Download free 30-day trial

RadTreeView LoadOnDemand with CRUD operations

Date Posted Product Author
April 03, 2014 RadTreeView for WinForms Georgi Georgiev

Problem:

You have a complex hierarchy, which includes business objects of different types. Some of them have children and some - do not. How to visualize it, using RadTreeView and keep the CRUD operations?

Solution:

Use Load On Demand and load the hierarchy manually.

radtreeview-loadondemand-with-crud-operations001

In this example, we will use the following scenario: A hierarchy, which has Teams, each Team has TeamMembers and Tasks, and each TeamMember has his own Tasks. Every Team, TeamMember and Task have names which will be displayed in the RadTreeView.

Below you can see the implementation of these types. Note that their child collections are BindingLists and that every type implements INotifyPropertyChanged. We will use this approach so that every property change will bubble up to the top-most collection which we will monitor: 

public class Team : INotifyPropertyChanged
{
    private string teamName;

    public string TeamName
    {
        get { return this.teamName; }
        set
        {
            this.teamName = value;
            this.OnPropertyChanged("TeamName");
        }
    }

    public BindingList<TeamMember> TeamMembers { get; private set; }
    public BindingList<Task> TeamTasks { get; private set; }

    public Team(string teamName)
    {
        this.TeamName = teamName;

        this.TeamMembers = new BindingList<TeamMember>();
        this.TeamTasks = new BindingList<Task>();

        this.TeamMembers.ListChanged += TeamMembers_ListChanged;
        this.TeamTasks.ListChanged += TeamTasks_ListChanged;
    }

    private void TeamTasks_ListChanged(object sender, ListChangedEventArgs e)
    {
        this.OnPropertyChanged("TeamTasks");
    }

    private void TeamMembers_ListChanged(object sender, ListChangedEventArgs e)
    {
        this.OnPropertyChanged("TeamName");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

public class TeamMember : INotifyPropertyChanged
{
    private string memberName;

    public string MemberName
    {
        get
        {
            return this.memberName;
        }
        set
        {
            this.memberName = value;
            this.OnPropertyChanged("MemberName");
        }
    }
    public BindingList<Task> MemberTasks { get; private set; }

    public TeamMember(string memberName)
    {
        this.MemberName = memberName;

        this.MemberTasks = new BindingList<Task>();

        this.MemberTasks.ListChanged += MemberTasks_ListChanged;
    }

    void MemberTasks_ListChanged(object sender, ListChangedEventArgs e)
    {
        this.OnPropertyChanged("MemberTasks");
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

public class Task : INotifyPropertyChanged
{
    private string taskName;

    public string TaskName
    {
        get { return this.taskName; }
        set
        {
            this.taskName = value;
            this.OnPropertyChanged("TaskName");
        }
    }

    public Task(string taskName)
    {
        this.TaskName = taskName;
    }

    public event PropertyChangedEventHandler PropertyChanged;

    protected virtual void OnPropertyChanged(string propName)
    {
        if (this.PropertyChanged != null)
        {
            this.PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Now, we need to initialize the RadTreeView, which will visualize our business objects:

this.TreeView = new RadTreeView();
this.TreeView.Parent = this;
this.TreeView.Dock = DockStyle.Fill;
this.TreeView.AllowRemove = true;
this.TreeView.AllowAdd = true;
this.TreeView.LazyMode = true;
this.TreeView.AllowDefaultContextMenu = true;

Since we will not bind our objects to RadTreeView, we will use the Tag property to save the business object. The following method will be very helpful further in this article:

private RadTreeNode CreateNode(string text, object tag)
{
    RadTreeNode newNode = new RadTreeNode(text);
    newNode.Tag = tag;
    return newNode;
}

After we have this method and our tree view set up, we can actually create the hierarchy:

private void InitializeHierarchy()
{
    //the Teams collection is a property of the Form
    this.Teams = new BindingList<Team>();

    Team winFormsTeam = new Team("WinForms");
    this.Teams.Add(winFormsTeam);

    TeamMember john = new TeamMember("John");
    winFormsTeam.TeamMembers.Add(john);
    Task johnsTask = new Task("Refactor RadTreeView");
    john.MemberTasks.Add(johnsTask);

    TeamMember alice = new TeamMember("Alice");
    winFormsTeam.TeamMembers.Add(alice);
    Task aliceTask = new Task("Help John");
    alice.MemberTasks.Add(aliceTask);

    Task winFormsUnassignedTask = new Task("Create an article regarding TreeView load on demand and CRUD operations");
    winFormsTeam.TeamTasks.Add(winFormsUnassignedTask);

    Team wpfTeam = new Team("WPF");
    this.Teams.Add(wpfTeam);

    TeamMember annie = new TeamMember("Annie");
    wpfTeam.TeamMembers.Add(annie);

    Task annieTask = new Task("Research for control XXXXX");
    annie.MemberTasks.Add(annieTask);

    Task unnasignedWpfTask = new Task("Help Annie");
    wpfTeam.TeamTasks.Add(unnasignedWpfTask);

    Task secondUnnasignedWpfTask = new Task("Evaluate the research of Annie");
    wpfTeam.TeamTasks.Add(secondUnnasignedWpfTask);

    TeamMember memberWithoutTasks = new TeamMember("Jack");
    wpfTeam.TeamMembers.Add(memberWithoutTasks);

    foreach (Team team in this.Teams)
    {
        this.TreeView.Nodes.Add(this.CreateNode(team.TeamName, team));
    }
}

You see at the bottom that we are adding the Teams to the Nodes collection of the RadTreeView. They will be our base and when expanded we will load their children.

As we speak about loading children, you need to subscribe to the NodesNeeded event. In the event handler we will check for the Tag of the parent node and of the current node. This will allow us to get the appropriate type and load its children. For example, If the parent is a Team then we need to load this Team’s TeamMembers and Tasks:

private void TreeView_NodesNeeded(object sender, NodesNeededEventArgs e)
{
    if (e.Parent == null || e.Parent.Tag == null || e.Parent.Tag is Task)
    {
        return;
    }

    Team team = e.Parent.Tag as Team;
    if (team != null)
    {
        foreach (TeamMember member in team.TeamMembers)
        {
            e.Nodes.Add(this.CreateNode(member.MemberName, member));
        }

        foreach (Task task in team.TeamTasks)
        {
            e.Nodes.Add(this.CreateNode(task.TaskName, task));
        }
    }

    TeamMember teamMember = e.Parent.Tag as TeamMember;
    if (teamMember != null)
    {
        foreach (Task task in teamMember.MemberTasks)
        {
            e.Nodes.Add(this.CreateNode(task.TaskName, task));
        }
    }
}

radtreeview-loadondemand-with-crud-operations002

If you run the application now, you will notice that the nodes are loading their children, however there is something which we do not really like. We know that the Tasks do not have any children, yet, they have expanders in front of them. We can easily correct that by using the NodeFormatting event. In the event handler we simply check if the node’s Tag is a Task and if it is TeamMember, whether it has any Tasks, and if it is a Team, whether it has any TeamMembers or Tasks and hide the expander appropriately.

private void TreeView_NodeFormatting(object sender, TreeNodeFormattingEventArgs e)
{
    Team team = e.Node.Tag as Team;
    TeamMember teamMember = e.Node.Tag as TeamMember;
    if ((e.Node.Tag == null || e.Node.Tag is Task) ||
        (team != null && team.TeamMembers.Count == 0 && team.TeamTasks.Count == 0) ||
        (teamMember != null && teamMember.MemberTasks.Count == 0))
    {
        e.NodeElement.ExpanderElement.Visibility = Telerik.WinControls.ElementVisibility.Hidden;
    }
    else
    {
        e.NodeElement.ExpanderElement.ResetValue(VisualElement.VisibilityProperty, ValueResetFlags.Local);
    }
}

Now, our hierarchy is properly visualized, all we have left to do is to implement the CRUD operations which will keep the RadTreeView and the BindingList synchronized. To handle the case where a node is removed/added from/to RadTreeView you will need to subscribe to the NodeRemoving and NodeAdded event handlers, respectively. What will happen in these event handlers is very similar to what is happening in the NodesNeeded event handler from before, where we check the parent and modify its children: 

private void TreeView_NodeAdded(object sender, RadTreeViewEventArgs e)
{
    if (e.Node.Parent == null)
    {
        return;
    }

    Team team = e.Node.Parent.Tag as Team;
    if (team != null)
    {
        TeamMember member = e.Node.Tag as TeamMember;
        if (member != null)
        {
            team.TeamMembers.Add(member);
        }

        Task task = e.Node.Tag as Task;
        if (task != null)
        {
            team.TeamTasks.Add(task);
        }
    }

    TeamMember teamMember = e.Node.Parent.Tag as TeamMember;
    if (teamMember != null)
    {
        Task task = e.Node.Tag as Task;
        if (task != null)
        {
            teamMember.MemberTasks.Add(task);
        }
    }
}

private void TreeView_NodeRemoving(object sender, RadTreeViewCancelEventArgs e)
{
    if (e.Node.Parent == null)
    {
        return;
    }

    Team team = e.Node.Parent.Tag as Team;
    if (team != null)
    {
        TeamMember member = e.Node.Tag as TeamMember;
        if (member != null)
        {
            team.TeamMembers.Remove(member);
        }

        Task task = e.Node.Tag as Task;
        if (task != null)
        {
            team.TeamTasks.Remove(task);
        }
    }

    TeamMember teamMember = e.Node.Parent.Tag as TeamMember;
    if (teamMember != null)
    {
        Task task = e.Node.Tag as Task;
        if (task != null)
        {
            teamMember.MemberTasks.Remove(task);
        }
    }
}

And to handle the case where something is modified in the data source, we will need to subscribe to the ListChanged event of the BindingList and rebuild the RadTreeView by clearing the nodes and re-adding the first level nodes. You can optionally save the expanded node’s state as per this article.

In this article
Related articles
Not finding the help you need? Improve this article