Goal: Bind the treeview to a flat database creating a hierarchical treeview.

A secondary goal is to work exclusively within the design surface of Visual Studio.

To achieve the goals, this tutorial will walk you through the following steps:

1. Telerik RadTreeView can bind to flat data sources such as Access tables. Add an Access table to your project.
2. Configure the data source.
3. Bind the treeview to the Access data source through the DataSourceID property of the treeview.
4. Create the treeview hierarchy by binding the DataFieldID and DataFieldParentID properties of the treeview.
5. Use the DataBindings collection to populate the tree nodes with data.

This tutorial assumes that you:

• are using Visual Studio 2005
• have set up a project called DataBindings
• have added the RadControls folder (with its Treeview subfolder)
• have removed from the Visual Studio Toolbox previous versions (if any) of Telerik RadTreeView
• have added Telerik RadTreeView to the Visual Studio Toolbox

Add an Access database to the project

The only requirement is for the Access data source to have columns that will populate the ID and ParentID properties of the treeview. (The columns can have any names, not necessarily ID and ParentID) The parent ID for all root nodes should be null (nothing).

Below is a screenshot of the tree.mdb Access table used in this tutorial. The most important columns are ID and ParentID - these will later be bound to the respective treeview properties to provide the hierarchical structure of the treeview:

Pic.1

It is not necessary for the names of the columns and the properties to be identical.

1. Copy the Access database to the root of your project.
2. Drag an instance of Telerik RadTreeView from the Toolbox to the design surface.
3. Likewise, drag an instance of the AccessDataSource control. (Pic. 2)
   
   Pic.2
   

Configure the data source

Next, you need to configure the newly added data source as shown in Pic. 3 and Pic. 4:

Pic.3

1. Click the AccessDataSource smart tag.
2. Click Configure Data Source.
3. In the Configure Data Source dialog, click Browse. Select the newly added data source and then click OK.
   The name and path appear under Microsoft Access data file.
4. Click Next.
   
   Pic.4
   
5. On the second screen of the wizard, select Specify columns from a table or view and from the drop-down, select Links. 
6. Select all columns (*).
7. Go to the next screen.
8. Optionally, you can click Test Query to check the database connection. When ready, click Finish.

Bind the treeview to the data source

You can bind the treeview in any of the following two ways:

Create the treeview hierarchy

Simply set the DataFieldID and DataFieldParentID properties as shown in Pic. 8:
Pic.8

If you build the project now, the treeview will look similar to the one shown in Pic. 9 below:
Pic.9

• Right-click the treeview and select Edit RadTreeNode Databindings.
• Click the Edit RadTreeNode Databindings shortcut at the bottom of the Properties window of the treeview.
• In the Properties window of the treeview, click the button in the row for the DataBindings property (as shown in Pic. 10 below).

  The RadTreeNodeBinding Collection Editor window opens. Folow the instructions shown in Pic. 11:
  Pic.10
  
  
  Pic.11
  
  • Add a data member to the collection.
  • Set the TextField property as illustrated.
  • Click OK.
    

    
    If you build your project now, the treeview will look similar to the one shown in Pic. 12:
    Pic.12
    
    
    Thus our initial goal is achieved.
    

New goal: implement different binding logic for each level of hierarchy

Our treeview has three levels of nodes. So far we have bound all levels using the same logic: the Text property of each item is populated from the Text column. To do so, we used the TextField property of the DataBindings collection.

Our new goal is to:

• populate the text of all second level nodes from the Text2 column of the Access table;
• use the same tooltip for all second level items;
• populate the text of all third level items from the Text3 column.

 

To achieve our new goal, we need to add more data members to the DataBindings collection and set different depth for each new data member.

Add a data member for second-level items

As shown above, open the RadTreeNodeBinding Collection Editor window and add a new data member.

Set the following properties:

• Depth = "1", to declare that this data member applies to second-level nodes;
• TextField = "Text2", to bind the second-level items to the Text2 column;
• ToolTip = "Custom tool tip here", to make each second-level node appear with the "Custom tool tip here" string as a tool tip. 

Text vs TextField, Value vs ValueField, etc. All properties ending with the suffix -Field can be databound to take their values from a corresponding field in the data source. Properties not ending with -Field are static: all RadTreeNode objects to which the RadTreeNodeBinding object is applied share the same value. For instance, if your database contains a column named Text and you set TextField="Text", the Text property of all tree nodes will take its value from the Text column in the database. Alternatively, if you set Text="Text", all your tree nodes will take the static string "Text" as the value of their Text property.

If you build your project at this stage, you will notice how all second-level nodes have taken their values from the Text2 column in the database (Pic. 13).

Pic.13

Add a data member for third-level items

Set the following properties:

• Depth = "2", to declare that this data member applies to third-level nodes;
• TextField = "Text3", to take the text of all third-level items from the Text3 column;

Leave the ToolTipField and ToolTip properties blank. Third-level items will not have tool tips.

 

The final result should look similar to the one shown in Pic. 14 below:

Pic.14

See Also

© Telerik 2002-2008. All Rights Reserved.