wpf-10366-controls-and-libraries-data-grid-display-hierarchical-data-bind-to-hierarchical-data-structure.md
A hierarchical data structure is a set of nested objects where a children field 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 TreeListView work with the hierarchical data structure:
View Example: Implement the Child Nodes Path
Use the Child Nodes Path to bind the TreeListView to a collection if all objects have the same children field. An example of such a structure is shown below:
public class BaseObject {
public string Name { get; set; }
public String Executor { get; set; }
public ObservableCollection<Task> Tasks { get; set; }
}
public class ProjectObject : BaseObject {}
public class Task : BaseObject {
public string State { get; set; }
}
Public Class BaseObject
Public Property Name As String
Public Property Executor As String
Public Property Tasks As ObservableCollection(Of Task)
End Class
Public Class ProjectObject
Inherits BaseObject
End Class
Public Class Task
Inherits BaseObject
Public Property State As String
End Class
Set the TreeListView.AllowChildNodeSourceUpdates property to true to update child nodes when you set the collection property to a new value.
Run Demo: Child Nodes Selector View Example: Use the Child Nodes Selector to Display Hierarchical Data
Use the Child Nodes Selector to create a hierarchical data structure in the TreeListView. 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;
// ...
}
Public Class ProjectObject
Inherits BaseObject
Public Property Stages As ObservableCollection(Of ProjectStage)
End Class
Public Class ProjectStage
Inherits BaseObject
Public Property Tasks As ObservableCollection(Of Task)
End Class
Public Class Task
Inherits BaseObject
Private state As State
' ...
End Class
Create a selector class that implements IChildNodesSelector, and override the SelectChildren(Object) method that returns node children.
Assign the Child Nodes Selector to the TreeListView.ChildNodesSelector property.
Set the TreeListView.TreeDerivationMode property to ChildNodesSelector.
Tip
If all objects have the same children field, assign its name to the TreeListView.ChildNodesPath property. Otherwise, create a Child Nodes Selector.
Run Demo: Asynchronous Data Loading View Example: Load Nodes Asynchronously Without Locking the Application's UI
If your Child Nodes Selector returns a large number of nodes, the fetch operation could freeze the application. To avoid this, create an Asynchronous Child Nodes Selector and fetch child nodes in a background thread. During fetch operations, parent nodes display loading indicators and the TreeListView remains responsive to user actions.
Create a selector that implements the IAsyncChildNodesSelector interface and override the HasChildNode and SelectChildrenAsync methods:
Assign the Child Nodes Selector to the TreeListView.ChildNodesSelector property.
Set the TreeListView.TreeDerivationMode property to ChildNodesSelector.
The asynchronous child nodes selector does not fetch nodes if the TreeListView.EnableDynamicLoading property is set to false.
Run Demo: Hierarchical Data Templates View Example: Use Hierarchical Data Templates to Build a Tree
You can use templates to create a hierarchical data structure in the TreeListView. 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;
// ...
}
Public Class ProjectObject
Inherits BaseObject
Public Property Stages As ObservableCollection(Of ProjectStage)
End Class
Public Class ProjectStage
Inherits BaseObject
Public Property Tasks As ObservableCollection(Of Task)
End Class
Public Class Task
Inherits BaseObject
Private state As State
' ...
End Class
If all objects have the same children field, create a hierarchical data template and assign it to the TreeListView.DataRowTemplate property. You can put hierarchical data templates into resources. Specify the data type to which a template should be applied:
<ResourceDictionary>
<HierarchicalDataTemplate DataType="{x:Type local:ProjectObject}" ItemsSource="{Binding Path=Stages}" />
<HierarchicalDataTemplate DataType="{x:Type local:ProjectStage}" ItemsSource="{Binding Path=Tasks}" />
</ResourceDictionary>
<dxg:TreeListControl.View>
<dxg:TreeListView TreeDerivationMode="HierarchicalDataTemplate" />
</dxg:TreeListControl.View>
If all objects have different children fields:
Create a template selector that implements the System.Windows.Controls.DataTemplateSelector and overrides the SelectTemplate method.
Assign the template selector to the TreeListView.DataRowTemplateSelector property.
Set the TreeListView.TreeDerivationMode property to HierarchicalDataTemplate.
Note
When the TreeListView is in hierarchical binding mode, users can sort and filter values if object types are the same. Set the TreeListView.AutoDetectColumnTypeInHierarchicalMode property to true to allow sorting/filtering (enabled by default).
You can control whether to create child nodes for a node. The following example shows how to prevent the TreeListView from creating child nodes for the Information Gathering node:
View Example: Control whether to Create Child Nodes
In a data source, create a field that determines whether a node has children (the HasChildNodes field in the code sample below):
Set the TreeListView.HasChildNodesPath property to this field’s name.