Unbound Mode

  • 10 minutes to read

Nodes are stored as nested collections because the TreeListView displays data in a tree. The collection of root level nodes can be accessed via the TreeListView.Nodes property. Each node has its own collection of child nodes available via the TreeListNode.Nodes property. These child nodes have their own children, etc.

In an unbound mode, you should manually build a TREE by creating nodes (TreeListNode) and adding them to the corresponding node collections.

NOTE

Nodes can be represented by objects of different types. The only requirement is that these data objects should have common fields (columns).

Example: How to Manually Create a Tree (Unbound Mode)

This example shows how to manually create a tree (unbound mode). It is shown how to create nodes in XAML and code.

View Example

using System;
using System.Windows;
using DevExpress.Xpf.Grid;

namespace TreeListView_UnboundMode {
    /// <summary>
    /// Interaction logic for MainWindow.xaml
    /// </summary>
    public partial class MainWindow : Window {
        public MainWindow() {
            InitializeComponent();
            BuildTree();
            treeListView1.ExpandAllNodes();
        }

        private void BuildTree() {
            TreeListNode rootNode = CreateRootNode(new ProjectObject() { Name = "Project: Stanton", Executor = "Nicholas Llams" });
            TreeListNode childNode = CreateChildNode(rootNode, new StageObject() { Name = "Information Gathering", Executor = "Ankie Galva" });
            CreateChildNode(childNode, new TaskObject() { Name = "Design", Executor = "Reardon Felton", State = "In progress" });
        }

        private TreeListNode CreateRootNode(object dataObject) {
            TreeListNode rootNode = new TreeListNode(dataObject);
            treeListView1.Nodes.Add(rootNode);
            return rootNode;
        }

        private TreeListNode CreateChildNode(TreeListNode parentNode, object dataObject) {
            TreeListNode childNode = new TreeListNode(dataObject);
            parentNode.Nodes.Add(childNode);
            return childNode;
        }
    }

    public class StageObject {
        public String Name { get; set; }
        public string Executor { get; set; }
    }

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

    public class TaskObject {
        public String Name { get; set; }
        public string Executor { get; set; }
        public string State { get; set; }
    }
}

Dynamic Data Loading

In an unbound mode, you need to manually create a tree (in code or XAML). A tree can be created on demand. Child nodes are dynamically created and initialized when their parent node is expanded.

To implement on demand node loading, handle the TreeListView.NodeExpanding event. This event occurs before a node is expanded, allowing you to dynamically populate its collection of child nodes. The processed node is returned by the event parameter’s TreeListNodeEventArgs.Node property.

NOTE

When expanding a node, you do not know whether it has child nodes or not. If the node has no child nodes, hide the expand button by setting the TreeListNode.IsExpandButtonVisible property to false.

Example: How to Implement On-Demand Data Loading

In this example, the TreeListView displays the file/folder tree. Child nodes that correspond to sub folders or files contained within a folder are dynamically created when a parent node is being expanded.

View Example

<Window x:Class="DynamicNodeLoading.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525" xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
    <Grid>
        <dxg:GridControl Name="grid">
            <dxg:GridControl.Columns>
                <dxg:GridColumn FieldName="Name" />
                <dxg:GridColumn FieldName="ItemType" />
                <dxg:GridColumn FieldName="Size" />
                <dxg:GridColumn FieldName="FullName" />
            </dxg:GridControl.Columns>
            <dxg:GridControl.View>
                <dxg:TreeListView Name="treeListView1" AutoWidth="True"
                                  NodeExpanding="treeListView1_NodeExpanding"/>
            </dxg:GridControl.View>
        </dxg:GridControl>
    </Grid>
</Window>