Introducing TreeView for WinForms (Beta)

In 2016 v2 release we're happy to present the beta version of TreeView for WinForms. This control is designed to display, manage and edit hierarchical data structures. TreeView for WinForms extends the core concept of standard TreeView control with multi-column representation, editable nodes, multiple images for single node, several data binding modes, rich styles and more.

Quick Start for WinForms TreeView

Let's start with a very simple tree. Drop the TreeView control to the form and look at its design actions menu. Let's add few tree nodes. Click on "Edit nodes…" menu item and create some basic structure in design-time editor: Or you can add some nodes from code:

c1TreeView1.Nodes.Add("Node0");  
c1TreeView1.Nodes[0].Nodes.Add("Node01");  
c1TreeView1.Nodes.Add("Node1");  

Now you can build and run application to see how it all works at runtime.

TreeView Columns

The TreeView control always has at least one column. If you need more columns, you should add them to the C1TreeView.Columns collection. By default, a TreeView column displays the string representation of the node in unbound mode, and the string representation of the underlying data in bound mode. To alter this behavior, set the value of the C1TreeColumn.DisplayFieldName property to the list of fields to be displayed in the column (depending on the node level). In this example, TreeView displays a folder tree, and DisplayFieldName property is set for display Category.Name and Folder.Name properties:

public class Category  
{  
   public int Id { get; set; }  
   public string Name { get; set; }  
   public List Folders { get; set; }  

   public Category()  
   {  
      Folders = new List();  
   }  
}  

public class Folder  
{  
   public int Id { get; set; }  
   public string Name { get; set; }  
}  

public Form1()  
{  
   InitializeComponent();  
   // init data  
   var categories = new List();  
   categories.Add(new Category() { Id = 1, Name = "Main" });  
   categories[0].Folders.Add(new Folder() { Id = 10, Name = "Src" });  
   categories[0].Folders.Add(new Folder() { Id = 11, Name = "Docs" });  
   categories.Add(new Category() { Id = 2, Name = "Resources" });  
   categories[1].Folders.Add(new Folder() { Id = 20, Name = "Images" });  
   categories[1].Folders.Add(new Folder() { Id = 21, Name = "Icons" });  
   categories[1].Folders.Add(new Folder() { Id = 22, Name = "Files" });  
   // init C1TreeView  
   c1TreeView1.DataMember = "\\\Folders";  
   c1TreeView1.DataSource = categories;  

   c1TreeView1.Columns[0].HeaderText = "Folder tree";  
  c1TreeView1.Columns[0].DisplayFieldName = "Name\\\Name";  
}  

Data Binding in the WinForms TreeView

In addition to unbound mode, the control may take two types of data binding: Hierarchical data: To display hierarchical data, you should specify DataSource and DataMember properties. The DataMember property determines the name of a specific record set within the DataSource.

c1TreeView1.DataMember = "\\\ProductsGroups\\\Products";  
c1TreeView1.Columns[0].DisplayFieldName = string.Empty;  
c1TreeView1.Columns[1].DisplayFieldName = "CountOfProducts\\\CountOfProducts\\\";  
c1TreeView1.Columns[2].DisplayFieldName = "\\\\\\Price";  

Hierarchical Data in TreeView: Download the Visual Studio Sample (C#/VB)

Self-referencing data: To display self-referencing data, you should specify the DataSource, KeyField and ParentKeyField properties.

• KeyField property determines the key field of the data source bound to the TreeView control.
• ParentKeyField property determines the data source field identifying the parent record in this data source.

c1TreeView1.DataMember = "Employees";  
c1TreeView1.KeyField = "ID";  
c1TreeView1.ParentKeyField = "ChiefID";  
c1TreeView1.Columns[0].DisplayFieldName = "Post\\\Post\\\Post";  
c1TreeView1.Columns[1].DisplayFieldName = "FirstName\\\FirstName\\\FirstName";  
c1TreeView1.Columns[2].DisplayFieldName = "LastName\\\LastName\\\LastName";  

Self-Referencing data in TreeView: Download the Visual Studio Sample (C#/VB)

Edit Mode

The C1TreeView control supports editing. To enable it, set AllowEdit property to True. C1TreeView has three embedded editors: TextBox, ComboBox and CheckBox. To switch editors, you should use C1TreeColumn.EditorType property. You can also use any other custom editor controls. To set custom editor use C1TreeColumn.Editor property. For advanced editing scenarios your custom editor should implement IC1TreeEditor interface.

Edit mode in TreeView: Download the Visual Studio Sample (C#/VB)

Styles in TreeView

You can set styles at four different levels:

• Whole control
• Column
• Node
• Individual cells

To change the style of tree or tree column, use C1TreeView.Styles or C1TreeColumn.Styles properties.

c1TreeView1.Styles.Default.BackColor = Color.LightGreen;  
c1TreeView1.Columns[0].Styles.Default.BackColor = Color.LightBlue;  

To change the style of tree node or tree node cell, use ApplyNodeStyles or ApplyNodeCellStyles events.

void C1TreeView1_ApplyNodeCellStyles(object sender, C1TreeViewNodeCellStylesEventArgs e)  
{  
   if (e.Node.Level == 0 && e.ColumnIndex == 0)  
      e.NodeCellStyles.Default.BackColor = Color.LightGray;  
}  

Read more about TreeView for WinForms