Hierarchical Data Structure
- 7 minutes to read
A hierarchical data structure is a set of nested objects with a field that contains child records. Parents and children can be of different object types.
The DataControlBase.ItemsSource property contains only data items that correspond to root nodes. Use the following techniques to make the TreeViewControl work with the hierarchical data structure:
- Child Nodes Path - Set a path to the children field. Use this technique only when child and parent fields have the same object type.
- Child Nodes Selector - Create a selector that returns node children. You can use this technique for different object types.
- Hierarchical Data Templates - Create a template for different data types.
Child Nodes Path
Use this technique to bind the TreeViewControl to a collection if all objects have the same field that contains child nodes.
To display a tree structure, set the TreeViewControl.ChildNodesPath property to a field that contains child nodes (the Employees field in the code sample below).
<dxg:TreeViewControl ItemsSource="{Binding EmployeeDepartments}"
ChildNodesPath="Employees"
TreeViewFieldName="Name"/>
using System.Windows;
using System.Collections.Generic;
using System.Collections.ObjectModel;
using DevExpress.Mvvm;
namespace TreeViewChildNodesSelector {
public class MainWindowViewModel : ViewModelBase {
public MainWindowViewModel() {
EmployeeDepartments = Departments.GetDepartments();
}
public List<EmployeeDepartment> EmployeeDepartments { get; set; }
}
public class Employee {
public Employee(int id, string name) {
ID = id;
Name = name;
}
public int ID { get; set; }
public string Name { get; set; }
}
public class EmployeeDepartment {
public string Name { get; set; }
public ObservableCollection<Employee> Employees { get; }
public EmployeeDepartment(string name, IEnumerable<Employee> employees) {
Name = name;
Employees = new ObservableCollection<Employee>(employees);
}
}
public static class Departments {
public static List<EmployeeDepartment> GetDepartments() {
List<EmployeeDepartment> departments = new List<EmployeeDepartment> {
new EmployeeDepartment("Management", new Employee[] {
new Employee(0, "Gregory S. Price")
}, true),
new EmployeeDepartment("Marketing", new Employee[] {
new Employee(1, "Irma R. Marshall"),
new Employee(2, "Brian C. Cowling"),
new Employee(3, "Thomas C. Dawson"),
new Employee(4, "Bryan R. Henderson"),
}, true),
new EmployeeDepartment("Operations", new Employee[] {
new Employee(5, "John C. Powell"),
new Employee(6, "Harold S. Brandes"),
new Employee(7, "Jan K. Sisk"),
new Employee(8, "Sidney L. Holder"),
}, true),
new EmployeeDepartment("Production", new Employee[] {
new Employee(9, "Christian P. Laclair"),
new Employee(10, "James L. Kelsey"),
new Employee(11, "Howard M. Carpenter"),
new Employee(12, "Jennifer T. Tapia"),
},false),
new EmployeeDepartment("Finance", new Employee[] {
new Employee(13, "Karen J. Kelly"),
new Employee(14, "Judith P. Underhill"),
new Employee(15, "Russell E. Belton"),
},false) };
return departments;
}
}
}
Child Nodes Selector
Use this technique to display a hierarchical data structure for different object types.
If all objects have the same field that contains child nodes, use the Child Nodes Path technique.
An example of this structure is shown below:
public class ProjectObject : BaseObject {
public ObservableCollection<ProjectStage> Stages { get; set; }
}
public class ProjectStage : BaseObject {
public ObservableCollection<Task> Tasks { get; set; }
}
public class Task : BaseObject {
State state;
// ...
}
Create a selector class that implements IChildNodesSelector, and override the SelectChildren(Object) method that returns node children.
For the Project-Stage-Task class structure, the selector class is as follows:
public class CustomChildrenSelector : IChildNodesSelector { public IEnumerable SelectChildren(object item) { if (item is Task) return null; else if (item is ProjectStage) return (item as ProjectStage).Tasks; else if (item is ProjectObject) return (item as ProjectObject).Stages; return null; } }Assign the Child Nodes Selector to the ChildNodesSelector property.
<dxg:TreeViewControl ItemsSource="{Binding DataItems}" TreeViewFieldName="Name"> <dxg:TreeViewControl.ChildNodesSelector> <local:CustomChildrenSelector/> </dxg:TreeViewControl.ChildNodesSelector> </dxg:TreeViewControl>
Hierarchical Data Templates
You can use templates to display a hierarchical data structure in the TreeViewControl.
This technique is slower than the Child Nodes Path and Child Nodes Selector because it uses the standard Binding mechanism to obtain child nodes.
An example of this structure is shown below:
public class ProjectObject : BaseObject {
public ObservableCollection<ProjectStage> Stages { get; set; }
}
public class ProjectStage : BaseObject {
public ObservableCollection<Task> Tasks { get; set; }
}
public class Task : BaseObject {
State state;
// ...
}
If all objects have the same field that contains child nodes, create a hierarchical data template and assign it to the NodeTemplate property. You can put hierarchical data templates into resources. Specify the data type to which a template should be applied:
<Window.Resources>
<HierarchicalDataTemplate DataType="{x:Type local:ProjectObject}" ItemsSource="{Binding Path=Stages}" />
<HierarchicalDataTemplate DataType="{x:Type local:ProjectStage}" ItemsSource="{Binding Path=Tasks}" />
</Window.Resources>
<dxg:TreeViewControl ItemsSource="{Binding DataItems}"
TreeViewFieldName="Name"
TreeDerivationMode="HierarchicalDataTemplate"/>
If all objects have different fields that contain child nodes:
Create a template selector that implements the System.Windows.Controls.DataTemplateSelector and overrides the SelectTemplate method.
<Window.Resources> <ResourceDictionary> <local:CustomHierarchicalDataTemplateSelector x:Key="selector"> <local:CustomHierarchicalDataTemplateSelector.ProjectDataTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Stages}" /> </local:CustomHierarchicalDataTemplateSelector.ProjectDataTemplate> <local:CustomHierarchicalDataTemplateSelector.ProjectStageDataTemplate> <HierarchicalDataTemplate ItemsSource="{Binding Path=Tasks}" /> </local:CustomHierarchicalDataTemplateSelector.ProjectStageDataTemplate> </local:CustomHierarchicalDataTemplateSelector> </ResourceDictionary> </Window.Resources>public class CustomHierarchicalDataTemplateSelector : DataTemplateSelector { public HierarchicalDataTemplate ProjectDataTemplate { get; set; } public HierarchicalDataTemplate ProjectStageDataTemplate { get; set; } public override System.Windows.DataTemplate SelectTemplate(object item, System.Windows.DependencyObject container) { var rowData = item as DevExpress.Xpf.Grid.TreeList.TreeListRowData; var element = rowData.Row; if (element is ProjectObject) return ProjectDataTemplate; if (element is ProjectStage) return ProjectStageDataTemplate; return null; } }Assign the template selector to the NodeTemplateSelector property.
Set the TreeDerivationMode property to HierarchicalDataTemplate.
<dxg:TreeViewControl TreeDerivationMode="HierarchicalDataTemplate" NodeTemplateSelector="{StaticResource selector}"/>