Lesson 1 - Binding to Data

• May 22, 2020
• 4 minutes to read

This tutorial shows how to create a self referencing data structure and display it within the DXTreeList control.

Steps 1-4. Create a New Silverlight Application and Create the TreeListControl

1. Run MS Visual Studio 2010.
2. Create a new Silverlight Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose the Silverlight Application.

3. Add a TreeListControl component to the project. To do this, open the Visual Studio toolbox, locate the "DX.14.2: Data" tab, choose the TreeListControl toolbox item and drop it onto the page.

   

4. Modify XAML so that the TreeList control fills the entire page.

   XAML

   
   <UserControl x:Class="DXTreeList_Tutorial_1.MainPage"
       xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
       xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
       xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
       xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
       mc:Ignorable="d"
       d:DesignHeight="300" d:DesignWidth="400"
                xmlns:dxg="http://schemas.devexpress.com/winfx/2008/xaml/grid">
   
       <Grid x:Name="LayoutRoot" Background="White">
           <dxg:TreeListControl Name="treeListControl1">
               <dxg:TreeListControl.Columns>
                   <dxg:TreeListColumn FieldName="Column1" />
                   <dxg:TreeListColumn FieldName="Column2" />
               </dxg:TreeListControl.Columns>
               <dxg:TreeListControl.View>
                   <dxg:TreeListView Name="treeListView1" />
               </dxg:TreeListControl.View>
           </dxg:TreeListControl>
       </Grid>
   </UserControl>
   

Steps 5-8. Creating a Self Referencing Data Structure and Binding It to the TreeListControl

To build a tree, the data source should contain two special fields.

• Key Field: This field must contain unique values used to identify nodes.
• Parent Field: This field must contain values that indicate parent nodes.

 

5. Create the Employee class.

   C#

   
   public class Employee {
       public int ID { get; set; }
       public int ParentID { get; set; }
       public string Name { get; set; }
       public string Position { get; set; }
       public string Department { get; set; }
   }
   

6. Create the Stuff class and implement the GetStuff() static method to return the list of Employee objects.

   C#

   
   public static class Stuff {
       public static List<Employee> GetStuff() {
           List<Employee> stuff = new List<Employee>();
           stuff.Add(new Employee() { ID = 1, ParentID = 0, Name = "Gregory S. Price", Department = "", Position = "President" });
           stuff.Add(new Employee() { ID = 2, ParentID = 1, Name = "Irma R. Marshall", Department = "Marketing", Position = "Vice President" });
           stuff.Add(new Employee() { ID = 3, ParentID = 1, Name = "John C. Powell", Department = "Operations", Position = "Vice President" });
           stuff.Add(new Employee() { ID = 4, ParentID = 1, Name = "Christian P. Laclair", Department = "Production", Position = "Vice President" });
           stuff.Add(new Employee() { ID = 5, ParentID = 1, Name = "Karen J. Kelly", Department = "Finance", Position = "Vice President" });
   
           stuff.Add(new Employee() { ID = 6, ParentID = 2, Name = "Brian C. Cowling", Department = "Marketing", Position = "Manager" });
           stuff.Add(new Employee() { ID = 7, ParentID = 2, Name = "Thomas C. Dawson", Department = "Marketing", Position = "Manager" });
           stuff.Add(new Employee() { ID = 8, ParentID = 2, Name = "Angel M. Wilson", Department = "Marketing", Position = "Manager" });
           stuff.Add(new Employee() { ID = 9, ParentID = 2, Name = "Bryan R. Henderson", Department = "Marketing", Position = "Manager" });
   
           stuff.Add(new Employee() { ID = 10, ParentID = 3, Name = "Harold S. Brandes", Department = "Operations", Position = "Manager" });
           stuff.Add(new Employee() { ID = 11, ParentID = 3, Name = "Michael S. Blevins", Department = "Operations", Position = "Manager" });
           stuff.Add(new Employee() { ID = 12, ParentID = 3, Name = "Jan K. Sisk", Department = "Operations", Position = "Manager" });
           stuff.Add(new Employee() { ID = 13, ParentID = 3, Name = "Sidney L. Holder", Department = "Operations", Position = "Manager" });
   
           stuff.Add(new Employee() { ID = 14, ParentID = 4, Name = "James L. Kelsey", Department = "Production", Position = "Manager" });
           stuff.Add(new Employee() { ID = 15, ParentID = 4, Name = "Howard M. Carpenter", Department = "Production", Position = "Manager" });
           stuff.Add(new Employee() { ID = 16, ParentID = 4, Name = "Jennifer T. Tapia", Department = "Production", Position = "Manager" });
   
           stuff.Add(new Employee() { ID = 17, ParentID = 5, Name = "Judith P. Underhill", Department = "Finance", Position = "Manager" });
           stuff.Add(new Employee() { ID = 18, ParentID = 5, Name = "Russell E. Belton", Department = "Finance", Position = "Manager" });
           return stuff;
       }
   }
   

7. Specify service columns (which contain unique and parent values).

   XAML

   
   <dxg:TreeListControl Name="treeListControl1">
               <dxg:TreeListControl.Columns>
                   <dxg:TreeListColumn FieldName="Column1" />
                   <dxg:TreeListColumn FieldName="Column2" />
               </dxg:TreeListControl.Columns>
               <dxg:TreeListControl.View>
                   <dxg:TreeListView Name="treeListView1"
                                         KeyFieldName="ID"
                                         ParentFieldName="ParentID"/>
           </dxg:TreeListControl>
   

8. Bind the TreeListControl to data.

   C#

   
   public partial class MainWindow : Window {
       public MainWindow() {
           InitializeComponent();
           treeListControl1.ItemsSource = Stuff.GetStuff();
       }
   }
   

Steps 9-10. Populate TreeList Columns

8. To automatically create all columns for all public fields in a data source, enable the DataControlBase.AutoPopulateColumns option and clear the TreeList's TreeListControl.Columns collection.

   XAML

   
   <dxg:TreeListControl Name="treeListControl1"
                                AutoPopulateColumns="True">
       <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1"
                                     KeyFieldName="ID"
                                     ParentFieldName="ParentID"/>
       </dxg:TreeListControl.View>
   </dxg:TreeListControl>
   

9. To manually create columns, leave the DataControlBase.AutoPopulateColumns property set to false and manage the TreeListControl.Columns collection.

   XAML

   
   <dxg:TreeListControl Name="treeListControl1">
       <dxg:TreeListControl.Columns>
           <dxg:TreeListColumn FieldName="Name"/>
           <dxg:TreeListColumn FieldName="Position"/>
           <dxg:TreeListColumn FieldName="Department"/>
       </dxg:TreeListControl.Columns>
       <dxg:TreeListControl.View>
           <dxg:TreeListView Name="treeListView1"
                               KeyFieldName="ID"
                               ParentFieldName="ParentID"/>
       </dxg:TreeListControl.View>
   </dxg:TreeListControl>
   

10. Run the application to see the result.