Bind to Hierarchical Data Structure

Feb 13, 2019
9 minutes to read

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 approaches to make the TreeListView work with the hierarchical data structure:

Child Nodes Path - Set a path to the children field. Use this approach 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 approach for different object types.
Hierarchical Data Templates - Create a template for different data types.

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:

C#
VB.NET

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.ChildNodesPath property to the children field name.

Set the TreeListView.TreeDerivationMode property to ChildNodesSelector.

In the code sample below, the Tasks field is the children field:

XAML

<dxg:TreeListControl Name="treeListView1" ItemsSource="{Binding DataItems}">
    <dxg:TreeListControl.Columns>
        <dxg:TreeListColumn FieldName="Name" AllowSorting="True" />
        <dxg:TreeListColumn FieldName="Executor" AllowSorting="True" />
        <dxg:TreeListColumn FieldName="State" AllowSorting="True" />
    </dxg:TreeListControl.Columns>
    <dxg:TreeListControl.View>
        <dxg:TreeListView TreeDerivationMode="ChildNodesSelector" ChildNodesPath="Tasks"/>
    </dxg:TreeListControl.View> 
</dxg:TreeListControl>

Tip

Example: How to: Implement ChildNodesPath

Child Nodes Selector

Tip

Demo: Child Nodes Selector

Requires installation of WPF Subscription. Download

Use the Child Nodes Selector to create a hierarchical data structure in the TreeListView. An example of this structure is shown below:

C#
VB.NET

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 DevExpress.Xpf.Grid.IChildNodeSelector, and override the SelectChildren method that returns node children.

For the Project-Stage-Task class structure, the selector class is as follows:

C#
VB.NET

public class CustomChildrenSelector : IChildNodesSelector {
    public IEnumerable SelectChildren(object item) {
        if (item is ProjectStage)
            return ((ProjectStage)item).Tasks;
        else if (item is ProjectObject)
            return ((ProjectObject)item).Stages;
        return null;
    }
}

Public Class CustomChildrenSelector
    Inherits IChildNodesSelector

    Public Function SelectChildren(ByVal item As Object) As IEnumerable
        If TypeOf item Is ProjectStage Then
            Return (CType(item, ProjectStage)).Tasks
        ElseIf TypeOf item Is ProjectObject Then
            Return (CType(item, ProjectObject)).Stages
        End If

        Return Nothing
    End Function
End Class

Assign the Child Nodes Selector to the TreeListView.ChildNodesSelector property.

Set the TreeListView.TreeDerivationMode property to ChildNodesSelector.

XAML

<dxg:TreeListControl x:Name="treeList"
                    ItemsSource="{Binding DataItems}"
                    DataContext="{StaticResource viewModel}">
    <dxg:TreeListControl.Resources>
        <local:CustomChildrenSelector x:Key="childrenSelector"/>
    </dxg:TreeListControl.Resources>
    <dxg:TreeListControl.Columns>
        <dxg:TreeListColumn FieldName="Name" />
        <dxg:TreeListColumn FieldName="Executor" />
        <dxg:TreeListColumn FieldName="State" />
    </dxg:TreeListControl.Columns>
    <dxg:TreeListControl.View>
        <dxg:TreeListView x:Name="view" TreeDerivationMode="ChildNodesSelector"
                          ChildNodesSelector="{StaticResource childrenSelector}"/>
    </dxg:TreeListControl.View>
</dxg:TreeListControl>

Tip

Example: How to: Implement Hierarchical Data Binding via Child Nodes Selector

Tip

If all objects have the same children field, assign its name to the TreeListView.ChildNodesPath property. Otherwise, create a Child Nodes Selector.

Hierarchical Data Templates

Tip

Demo: Hierarchical Data Templates

Requires installation of WPF Subscription. Download

You can use templates to create a hierarchical data structure in the TreeListView. An example of this structure is shown below:

C#
VB.NET

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:

XAML

<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.

XAML

<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>

C#
VB.NET

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 TreeListRowData;
        var element = rowData.Row;
        if (element is ProjectObject)
            return ProjectDataTemplate;
        if (element is ProjectStage)
            return ProjectStageDataTemplate;
        return null;
    }
}

Public Class CustomHierarchicalDataTemplateSelector
    Inherits DataTemplateSelector

    Public Property ProjectDataTemplate As HierarchicalDataTemplate
    Public Property ProjectStageDataTemplate As HierarchicalDataTemplate

    Public Overrides Function SelectTemplate(ByVal item As Object, ByVal container As System.Windows.DependencyObject) As System.Windows.DataTemplate
        Dim rowData = TryCast(item, TreeListRowData)
        Dim element = rowData.Row
        If TypeOf element Is ProjectObject Then Return ProjectDataTemplate
        If TypeOf element Is ProjectStage Then Return ProjectStageDataTemplate
        Return Nothing
    End Function
End Class

Assign the template selector to the TreeListView.DataRowTemplateSelector property.

Set the TreeListView.TreeDerivationMode property to HierarchicalDataTemplate.

XAML

<dxg:TreeListControl.View>
    <dxg:TreeListView DataRowTemplateSelector="{StaticResource selector}"
                      TreeDerivationMode="HierarchicalDataTemplate" />
</dxg:TreeListControl.View>

Tip

Example: How to: Build a Tree via HierarchicalDataTemplate

Note

First, the TreeListView verifies its TreeListView.DataRowTemplateSelector property. If the specified node selector returns null, or the TreeListView.DataRowTemplateSelector property is not specified, it uses a template the TreeListView.DataRowTemplate property specifies. If this property is not specified, an implicit hierarchical data template is used.
If the HierarchicalDataTemplate is defined for a node, its ItemTemplate and ItemTemplateSelector properties take precedence over the TreeListView.DataRowTemplate and TreeListView.DataRowTemplateSelector properties.

Sort and Filter in Hierarchical Binding Mode

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).

Control whether to Create Child Nodes

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:

In a data source, create a field that determines whether a node has children (the HasChildNodes field in the code sample below):

C#
VB.NET

public class BaseObject {
    public string Name { get; set; }
    public string Executor { get; set; }
    public ObservableCollection<Task> Tasks { get; set; }
    public bool HasChildNodes { get; set; }
}

public class ProjectObject : BaseObject { }

public class Task : BaseObject {
    public string State { get; set; }
}

public class ViewModel {
    ObservableCollection<ProjectObject> InitData() {
        ObservableCollection<ProjectObject> projects = new ObservableCollection<ProjectObject>();

        ProjectObject betaronProject = new ProjectObject() { Name = "Project: Betaron", Executor = "Mcfadyen Ball", Tasks = new ObservableCollection<Task>(), HasChildNodes = true };

        Task Task11 = new Task() { Name = "Information Gathering", Executor = "Kaiden Savastano", Tasks = new ObservableCollection<Task>(), HasChildNodes = false };
        Task11.Tasks.Add(new Task() { Name = "Market research", Executor = "Carmine Then", State = "Completed", HasChildNodes = false });
        Task11.Tasks.Add(new Task() { Name = "Making specification", Executor = "Seto Kober", State = "In progress", HasChildNodes = false });

        Task Task12 = new Task() { Name = "Planning", Executor = "Manley Difrancesco", Tasks = new ObservableCollection<Task>(), HasChildNodes = true };
        Task12.Tasks.Add(new Task() { Name = "Documentation", Executor = "Martez Gollin", State = "Not started", HasChildNodes = true });

        // ...    

        ProjectObject stantoneProject = new ProjectObject() { Name = "Project: Stanton", Executor = "Ruben Ackerman", Tasks = new ObservableCollection<Task>(), HasChildNodes = true };

        Task Task21 = new Task() { Name = "Information Gathering", Executor = "Huyen Trinklein", Tasks = new ObservableCollection<Task>(), HasChildNodes = false };
        Task21.Tasks.Add(new Task() { Name = "Market research", Executor = "Tanner Crittendon", State = "Completed", HasChildNodes = false });
        Task21.Tasks.Add(new Task() { Name = "Making specification", Executor = "Carmine Then", State = "Completed", HasChildNodes = false });

        Task Task22 = new Task() { Name = "Planning", Executor = "Alfredo Sookoo", Tasks = new ObservableCollection<Task>(), HasChildNodes = true };
        Task22.Tasks.Add(new Task() { Name = "Documentation", Executor = "Gorf Wobbe", State = "Completed", HasChildNodes = true });

        // ...
    }
}

Public Class BaseObject
    Public Property Name As String
    Public Property Executor As String
    Public Property Tasks As ObservableCollection(Of Task)
    Public Property HasChildNodes As Boolean
End Class

Public Class ProjectObject
    Inherits BaseObject
End Class

Public Class Task
    Inherits BaseObject

    Public Property State As String
End Class

Public Class ViewModel
    Private Function InitData() As ObservableCollection(Of ProjectObject)
        Dim projects As ObservableCollection(Of ProjectObject) = New ObservableCollection(Of ProjectObject)()

        Dim betaronProject As ProjectObject = New ProjectObject() With { .Name = "Project: Betaron", .Executor = "Mcfadyen Ball", .Tasks = New ObservableCollection(Of Task)(), .HasChildNodes = True }
        Dim Task11 As Task = New Task() With { .Name = "Information Gathering", .Executor = "Kaiden Savastano", .Tasks = New ObservableCollection(Of Task)(), .HasChildNodes = False }
        Task11.Tasks.Add(New Task() With { .Name = "Market research", .Executor = "Carmine Then", .State = "Completed", .HasChildNodes = False })
        Task11.Tasks.Add(New Task() With { .Name = "Making specification", .Executor = "Seto Kober", .State = "In progress", .HasChildNodes = False })
        Dim Task12 As Task = New Task() With { .Name = "Planning", .Executor = "Manley Difrancesco", .Tasks = New ObservableCollection(Of Task)(), .HasChildNodes = True }
        Task12.Tasks.Add(New Task() With { .Name = "Documentation", .Executor = "Martez Gollin", .State = "Not started", .HasChildNodes = True })

        ' ...

        Dim stantoneProject As ProjectObject = New ProjectObject() With { .Name = "Project: Stanton", .Executor = "Ruben Ackerman", .Tasks = New ObservableCollection(Of Task)(), .HasChildNodes = True }

        Dim Task21 As Task = New Task() With {.Name = "Information Gathering", .Executor = "Huyen Trinklein", .Tasks = New  .HasChildNodes = False }
        Task21.Tasks.Add(New Task() With { .Name = "Market research", .Executor = "Tanner Crittendon", .State = "Completed", .HasChildNodes = False })
        Task21.Tasks.Add(New Task() With { .Name = "Making specification", .Executor = "Carmine Then", .State = "Completed", .HasChildNodes = False })

        Dim Task22 As Task = New Task() With { .Name = "Planning", .Executor = "Alfredo Sookoo", .Tasks = New ObservableCollection(Of Task)(), .HasChildNodes = True }
        Task22.Tasks.Add(New Task() With { .Name = "Documentation", .Executor = "Gorf Wobbe", .State = "Completed", .HasChildNodes = True
        })

        ' ...
    End Function
End Class

Specify the TreeListView.HasChildNodesPath property to this field’s name.

Xaml

<dxg:GridControl Name="treeListView1" ItemsSource="{Binding DataItems}">
    <dxg:GridControl.Columns>
        <dxg:GridColumn FieldName="Name"/>
        <dxg:GridColumn FieldName="Executor"/>
        <dxg:GridColumn FieldName="State"/>
    </dxg:GridControl.Columns>
    <dxg:GridControl.View>
        <dxg:TreeListView TreeDerivationMode="ChildNodesSelector" ChildNodesPath="Tasks" HasChildNodesPath="HasChildNodes"/>
    </dxg:GridControl.View>
</dxg:GridControl>

Tip

GitHub Example: How to Control whether to Create Child Nodes

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Child Nodes Path

Child Nodes Selector

Hierarchical Data Templates

Sort and Filter in Hierarchical Binding Mode

Control whether to Create Child Nodes

Bind to Hierarchical Data Structure

Child Nodes Path

Child Nodes Selector

Hierarchical Data Templates

Related API

Sort and Filter in Hierarchical Binding Mode

Control whether to Create Child Nodes