Lesson 2 - Build a Tree in Unbound Mode

• May 13, 2020
• 3 minutes to read

The TreeListControl can operate without a data source in an unbound mode. This tutorial demonstrates how to create a tree without a data source.

Build a Tree in XAML

1. Create the ProjectObject class that implements data objects displayed within the TreeListControl:

   MainWindow.xaml.cs

   public class ProjectObject {
       public string Name { get; set; }
       public string Executor { get; set; }
   }
   

   MainWindow.xaml.vb

   Public Class ProjectObject
       Public Property Name As String
       Public Property Executor As String
   End Class
   

2. Add a TreeListControl to the window.

3. Create two columns and bind them to Name and Executor fields:

   MainWindow.xaml

   <dxg:TreeListControl Name="treeListControl1">
       <dxg:TreeListControl.Columns>
           <dxg:TreeListColumn FieldName="Name"/>
           <dxg:TreeListColumn FieldName="Executor"/>
       </dxg:TreeListControl.Columns>
       <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1"/>
       </dxg:TreeListControl.View>
   </dxg:TreeListControl>
   

4. Create root and child nodes. The TreeListControl stores root and child nodes in the TreeListView.Nodes and TreeListNode.Nodes collections respectively:

   MainWindow.xaml

   <dxg:TreeListControl.View>
       <dxg:TreeListView Name="treeListView1">
           <dxg:TreeListView.Nodes>
               <dxg:TreeListNode>
                   <dxg:TreeListNode.Content>
                       <local:ProjectObject Name="Project: Betaron" Executor="Destiny Tabisola" />
                   </dxg:TreeListNode.Content>
                   <dxg:TreeListNode.Nodes>
                       <dxg:TreeListNode>
                           <dxg:TreeListNode.Content>
                               <local:ProjectObject Name="Development" Executor="Kairra Hogg" />
                           </dxg:TreeListNode.Content>
                           <dxg:TreeListNode.Nodes>
                               <dxg:TreeListNode>
                                   <dxg:TreeListNode.Content>
                                       <local:ProjectObject Name="Coding" Executor="Sabato Durley" />
                                   </dxg:TreeListNode.Content>
                               </dxg:TreeListNode>
                           </dxg:TreeListNode.Nodes>
                       </dxg:TreeListNode>
                   </dxg:TreeListNode.Nodes>
               </dxg:TreeListNode>
           </dxg:TreeListView.Nodes>
       </dxg:TreeListView>
   </dxg:TreeListControl.View>
   

Build a Tree in Code

1. Create the ProjectObject class that implements data objects displayed within the TreeListControl:

   MainWindow.xaml.cs

   public class ProjectObject {
       public string Name { get; set; }
       public string Executor { get; set; }
   }
   

   MainWindow.xaml.vb

   Public Class ProjectObject
       Public Property Name As String
       Public Property Executor As String
   End Class
   

2. Add a TreeListControl to the window.

3. Create two columns and bind them to Name and Executor fields:

   MainWindow.xaml

   <dxg:TreeListControl Name="treeListControl1">
       <dxg:TreeListControl.Columns>
           <dxg:TreeListColumn FieldName="Name"/>
           <dxg:TreeListColumn FieldName="Executor"/>
       </dxg:TreeListControl.Columns>
       <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1"/>
       </dxg:TreeListControl.View>
   </dxg:TreeListControl>
   

4. Create root and child nodes in code:

   MainWindow.xaml.cs

   using DevExpress.Xpf.Grid;
   
   // ...
   public partial class MainWindow : Window {
       public MainWindow() {
           InitializeComponent();
           BuildTree();
       }
   
       void BuildTree() {
           TreeListNode rootNode = CreateRootNode(new ProjectObject() { Name = "Project: Stanton", Executor = "Nicholas Llams" });
           TreeListNode childNode = CreateChildNode(rootNode, new ProjectObject() { Name = "Information Gathering", Executor = "Ankie Galva" });
           CreateChildNode(childNode, new ProjectObject() { Name = "Design", Executor = "Reardon Felton" });
       }
   
       TreeListNode CreateRootNode(object dataObject) {
           TreeListNode rootNode = new TreeListNode(dataObject);
           treeListView1.Nodes.Add(rootNode);
           return rootNode;
       }
   
       TreeListNode CreateChildNode(TreeListNode parentNode, object dataObject) {
           TreeListNode childNode = new TreeListNode(dataObject);
           parentNode.Nodes.Add(childNode);
           return childNode;
       }
   }
   

   MainWindow.xaml.vb

   Imports DevExpress.Xpf.Grid
   
   Public Partial Class MainWindow
       Inherits Window
   
       Public Sub New()
           InitializeComponent()
           BuildTree()
       End Sub
   
       Private Sub BuildTree()
           Dim rootNode As TreeListNode = CreateRootNode(New ProjectObject() With {
               .Name = "Project: Stanton",
               .Executor = "Nicholas Llams"
           })
           Dim childNode As TreeListNode = CreateChildNode(rootNode, New ProjectObject() With {
               .Name = "Information Gathering",
               .Executor = "Ankie Galva"
           })
           CreateChildNode(childNode, New ProjectObject() With {
               .Name = "Design",
               .Executor = "Reardon Felton"
           })
       End Sub
   
       Private Function CreateRootNode(ByVal dataObject As Object) As TreeListNode
           Dim rootNode As TreeListNode = New TreeListNode(dataObject)
           treeListView1.Nodes.Add(rootNode)
           Return rootNode
       End Function
   
       Private Function CreateChildNode(ByVal parentNode As TreeListNode, ByVal dataObject As Object) As TreeListNode
           Dim childNode As TreeListNode = New TreeListNode(dataObject)
           parentNode.Nodes.Add(childNode)
           Return childNode
       End Function
   End Class