Table of Contents
Table of Contents
Populating from DataTable, DataView or IDataReader

Apply to

Menu, SlideMenu, TabStrip and TreeView

Overview

EO.Web controls can populate hierarchical navigation item structure from DataTable, DataView or IDataReader.

Use a DataTable to represent hierarchical data

Consider a table with the following data:

Country State City WebSite
U.S.A. GA Atlanta http://www.atlantaga.gov
U.S.A. GA Savannah http://www.ci.savannah.ga.us
U.S.A. FL Miami http://www.ci.miami.fl.us
U.S.A. FL Orlando http://www.cityoforlando.net
Canada ON Toronto http://www.city.toronto.on.ca

This table presents a hierarchical data structure of three levels: Country, State and City. It's very easy to construct such data from a relational database by joining a few related tables:
SQL
Copy 
SELECT Country.Name, State.Name, City.Name, City.WebSite
        FROM Country, State, City
        WHERE Country.ID = State.CountryID and State.ID = City.StateID

After the table is generated as above, to populate the navigation control from the data table, simply set the control's DataSource to this table, and DataFields to "Country|State|City", which specifies the control to use Country as the data field for top level group, State as data field for second level group and City as the data field for the third level group:

ASPX
Copy 
<eo:Menu Runat="server" DataFields="Country|State|City">
</eo:Menu>
For each data field except the lowest level, one item is created for records that have the same value; for the lowest level field, one item is created for each record regardless of the field value. The following shows the result menu populated from for the above table:

The menu that is generated by binding to one dimentional table

Note: EO.Web navigation controls also support binding to hierarchical data that uses parent key & child key in one table. For more details, see populating using Parent/Child key relation.

Mapping data field to item's property

When binding to a table, by default data field value in records are assigned to an item's Text.Html property. If you intend to assign 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 WebSite to NavigateUrl for the City level navigation items:

ASPX
Copy 
<eo:Menu Runat="server" DataFields="Country|State|City">
  <topgroup>
    <Bindings> 
        <eo:DataBinding 
            Property="NavigateUrl" 
            DataField="WebSite" 
            Depth="2"> 
        </eo:DataBinding> 
    </Bindings> 
  </topgroup>
</eo:Menu>

You can also override the default mapping. The following code uses WebSite instead of City as navigation item text:

ASPX
Copy 
<eo:Menu Runat="server" DataFields="Country|State|City">
  <topgroup>            
    <Bindings> 
        <eo:DataBinding 
            Property="Text-Html" 
            DataField="WebSite" 
            Depth="2"> 
        </eo:DataBinding> 
    </Bindings>
  </topgroup>     
</eo:Menu>

Use Depth to specify which level the mapping should be applied to. Depth begins with 0.

The easiest way to define DataBinding object is to use Control Builder. You can define Databinding on both the control and a specific NavigationItemGroup and add the DataBinding into the control's Bindings or the group's Bindings property.

Populating the whole navigation control

EO.Web navigation controls supports populating the whole control from a data source by binding the data source to the control. Simply specify the control's DataSource and DataFields properties, then call the control's DataBind method to construct the control from the data source.

Here's a sample of editting a Menu's Bindings property:

You can define multiple mappings on each level. Level specified by Depth property starts from 0.

Populating the group

EO.Web navigation controls support populating a certain group from a data source. Simply specify the group's DataFields and DataSource properties, then call DataBind method.

Here's a sample of editting a MenuGroup's Bindings property

Summary

Follow these steps to populate a control or group from DataTable, DataView or IDataReader:
  1. Drag an EO.Web navigation control onto the page;
  2. Prepare the DataTable object (or DataView, IDataReader);
  3. Set the control or group's DataFields property;
  4. Optionally, define one or more DataBinding objects on for the control or group;
  5. Call DataBind method on the control or group.