How to Create a Data-Bound Hierarchical TreeView in a WinForms App

A TreeView control provides an excellent interface to visualize hierarchical data with multiple item selection. The ComponentOne WinForms TreeView provides additional features like adding, removing, and editing nodes, showing multiple columns, drag & drop, and node customization.

In this blog, we will see how a TreeView can be bound to hierarchical data with multiple columns in three easy steps:

1. Create the Data Source
2. Bind the TreeView
3. Add Columns

Ready to get started with TreeView? Download a FREE trial of ComponentOne!

Create the Data Source

We will bind the TreeView to Northwind Categories and Products data. We want to display Category & Description from the Categories table at the first level and ProductName, QuantityPerUnit, and UnitPrice from the Products table at the second level. The Northwind database already has a relationship between the Categories and Products table, where each category can have many products.

• In a WinForms project, we created a connection to the Northwind database and added a dataset named C1NorthwindDataset to the project.
• Dragged and dropped the Categories and Products table to the dataset.

The above added the tables, as well as the CategoriesTableAdapter and ProductsTableAdapter, to the project.

Bind the TreeView

Add a C1TreeView control to the form and switch to code view.

Initialize the dataset, CategoriesTableAdapter and ProductsTableAdapter objects in the form constructor:

        C1NWindDataSetTableAdapters.ProductsTableAdapter productsTableAdapter;
        C1NWindDataSetTableAdapters.CategoriesTableAdapter categoriesTableAdapter;
        C1NWindDataSet ds;
        public Form1()
        {
            InitializeComponent();
            ds = new C1NWindDataSet();
            productsTableAdapter = new C1NWindDataSetTableAdapters.ProductsTableAdapter();
            categoriesTableAdapter = new C1NWindDataSetTableAdapters.CategoriesTableAdapter();

        }

Add a GetData method and fill in the dataset. Bind the TreeView with this dataset.

  private void GetData()
        {
            productsTableAdapter.Fill(ds.Products);
            categoriesTableAdapter.Fill(ds.Categories);
            // set data to treeview            
            c1TreeView1.BindingInfo.DataMemberPath[0] = "Categories";
            c1TreeView1.BindingInfo.DataMemberPath[1] = "Products";
            c1TreeView1.BindingInfo.KeyField = "CategoryID";
            c1TreeView1.BindingInfo.DataSource = ds;
        }

Note that we use the DataMemberPath property to assign Categories and Products Tables at the first and second level. We assign the KeyField to CategoryID and then set the data source.

Add Columns

We can now add the columns we want to display to the TreeView. Create an AddColumns method, and as mentioned earlier, we will add CategoryName and Description from the Categories table. In the code below, we get the first default column that is added and sets its DisplayFieldName and HeaderText properties.

Next, we add a TreeViewColumn, set its DisplayMemberPath with parameters for the level and name of the field. Since we wanted to add it to the first level, we set the parameters to “0” and “Description”.

Similarly, we add ProductName, QuantityPerUnit, and UnitPrice columns to the second level for the Products tables.

 private void AddColumns()
        {
            var column = c1TreeView1.Columns[0];
            column.DisplayFieldName = "CategoryName";
            column.HeaderText = "Category/Product Name";
            column.DisplayMemberPath.Add(1, "ProductName");
            column.Styles.WordWrap = true;
            column.Width = 150;

            C1.Win.TreeView.C1TreeColumn colDesc = new C1.Win.TreeView.C1TreeColumn();
            colDesc.DisplayMemberPath.Add(0, "Description");
            colDesc.HeaderText = "Description";
            colDesc.Styles.WordWrap = true;
            c1TreeView1.Columns.Add(colDesc);

            C1.Win.TreeView.C1TreeColumn colQty = new C1.Win.TreeView.C1TreeColumn();
            colQty.DisplayMemberPath.Add(1, "QuantityPerUnit");
            colQty.HeaderText = "QuantityPerUnit";
            colQty.AutoWidth = true;
            c1TreeView1.Columns.Add(colQty);

            C1.Win.TreeView.C1TreeColumn colUnitPrice = new C1.Win.TreeView.C1TreeColumn();
            colUnitPrice.DisplayMemberPath.Add(1, "UnitPrice");
            colUnitPrice.HeaderText = "UnitPrice";
            colUnitPrice.AutoWidth = true;
            c1TreeView1.Columns.Add(colUnitPrice);
        }

Now we have the TreeView configured to show the hierarchical data from the dataset. Call the GetData() and AddColumns() methods from the form load.

  private void Form1_Load(object sender, EventArgs e)
        {
           GetData();
           AddColumns();
        }

If we run the application, we can see each Category and related Product information. You can download the source code for this blog sample.

The TreeView supports databinding to BindingLists, self-referencing data in addition to XML loading.

You can find TreeView product samples on GitHub:

.NET Framework

.NET 6

Ready to get started with TreeView? Download a FREE trial of ComponentOne!