Table of Contents
Table of Contents
Populating using Parent/Child key relation

Apply to

Menu, SlideMenu, TabStrip and TreeView

Overview

EO.Web controls can populate hierarchical navigation item structure from a table that contains parent/child key. This is especially convenient when parent and child record have the same data structure and the depth of the control is not known in advance.

How to define hierarchical data structure using Parent/Child key

Considering the following Folders table:

FolderID ParentFolderID FolderName
1 null Root
2 1 My Documents
3 1 Windows
4 3 System32
5 3 Temp

This table represents a hierarchical data structure of:

Root

My Documents

Windows

System32

Temp

The depth of the tree is dynamic.

Populating the control

To populate an EO.Web control from this data source, use a DataSet object and a DataRelation object.

The DataRelation object defines a relation within the same table.

Note: The Nested property of all DataRelation objects must be set to true. If there are additional DataRelation objects in the same DataSet, you should also set DataTable property to the name of the data table.

See live demo and demo source code for details.

Mapping data field to item's property

When binding to a table with parent/child key, by default data field value in records are assigned to an item's Text.Html property. For example, for the DataSet shown above, set DataFields property to "FolderName" means mapping data field "FolderName" to item's Text.Html property.

If you intend to map data field value to other property, you can define one or more DataBinding objects to customize the mapping between a specific data field and a specific property.
The code below maps data field "FolderName" to item's Value property:

ASPX
Copy 
<eo:Menu Runat="server" DataFields="FolderName">
    ....
    <TopGroup>
        <Bindings> 
            <eo:DataBinding Property="Value" DataField="FolderName"> 
            </eo:DataBinding> 
        </Bindings> 
    </TopGroup>
    ....
</eo:Menu>
The easiest way to define DataBinding object is to use Control Builder. You can define Databinding on both the control or on a specific NavigationItemGroup and add the DataBinding into the control's Bindings or the group's Bindings property.

Summary

Follow these steps to bind a menu or navigation item group to a DataSet:
  1. Drag an EO.Web navigation control onto the page;
  2. Create a DataTable object, fill the DataTable object. Note that both parent and child key columns are in the same table;
  3. Create a DataSet object and define parent key and child key DataRelation object in the DataSet and set its Nested property to true;
  4. Set the control or group's DataSource property to the DataSet object;
  5. If you also reuse the same DataSet for other code and need to have more DataRelation objects in the same data set, you should also set DataTable property to the name of the data table;
  6. Optionally, define one or more DataBinding objects on for the control or group;
  7. Call DataBind method on the control or group.