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

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 RadMenu 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 menu to the Access data source through the DataSourceID property of the menu.
4. Create the menu hierarchy by binding the DataFieldID and DataFieldParentID properties of the menu.
5. Use the DataBindings collection to populate the menu items 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 Menu subfolder)
• have removed from the Visual Studio Toolbox previous versions (if any) of Telerik RadMenu
• have added Telerik RadMenu 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 menu. (The columns can have any names, not necessarily ID and ParentID) The parent ID for all root items should be null (nothing).

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

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 RadMenu from the Toolbox to the design surface.
3. Likewise, drag an instance of the AccessDataSource control. (Pic. 2)

Configure the data source

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 Table 1. 
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 menu to the data source

• You can use the menu smart tag, as shown in Pic. 5:

Pic. 5

1. Expand the Telerik RadMenu smart tag.
2. Under Choose data source, select the ID of the Access data source.

• Alternatively, you can set the DataSourceID from the Properties window of the menu, as shown in Pic. 6.

Pic. 6

Milestone

• The menu is still not populated with data.
• The hierarchy is not set.

Create the menu hierarchy

Populate the menu items with data

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

 

1. Add a data member to the collection.
2. Set the TextField and ToolTipField properties as illustrated.
3. Click OK.

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

• populate the text of all second level items 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 Tooltip 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 MenuItemBinding 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 items;
• TextField = "Text2", to bind the second-level items to the Text2 column;
• ToolTip = "Custom tool tip here", to make each second-level item 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 MenuItem objects to which the MenuItemBinding 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 menu items will take its value from the Text column in the database. Alternatively, if you set Text="Text", all your menu items will take the static string "Text" as the value of their Text property.

Add a data member for third-level items

Set the following properties:

• Depth = "2", to declare that this data member applies to third-level items;
• TextField = "Tooltip", to take the text of all third-level items from the Tooltip 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

© 2002-2008 Telerik. All Rights Reserved.