Apply to

Source Code Location

Live demo is available at our website: http://www.essentialobjects.com/demo/default.aspx?id=binding_template.

Source code for demo project can be launched from:
Start -> Programs -> EO.Web Controls x.x -> EO.Web for ASP.NET x.x -> Live Demo

If your installation directory is "c:\Program Files\Essential Objects", then this demo is located at: "c:\Program Files\Essential Objects\EO.Web Controls 3.0\Net11\Samples\CS\Demos\Menu\Programming\Data Binding\Using Item Template".
Demos for .NET 2.0 and VB are also available.

Overview

EO.Web navigation controls support using look ID or template item to specify the common settings for items created during data binding.

Using Default Item Look ID

Use a group's DefaultItemLookID to specify the default item look ID for the navigation items in the group. This property is used when a navigation item's LookID is set to default value Auto.

For more information about looks, see Look topic.

Using Template Item

A group's TemplateItem is used to define common settings for the group's child items, which are dynamically created during the data binding, for example:

[HTML]
<eo:Menu Runat="server" id="menu1"> 
    <TopGroup>
        <TemplateItem OnClickScript="window.alert('hi');">
        </TemplateItem>
    <TopGroup> 
</eo:Menu>

[C#]
menu1.DataSource = new string[]{"navigation item 1", "navigation item 2"};
menu1.DataBind();

The code above populates the menu with two items with both items' OnClickScript set to "window.alert('hi'); ".

Template item can contain sub group which has its own template item. For example:

[HTML]
<eo:Menu Runat="server" id="menu1"> 
    <TopGroup> 
        <TemplateItem OnClickScript="window.alert('first level');"> 
            <SubMenu ShadowDepth=3>
                <TemplateItem OnClickScript="window.alert('second level');">
                </TemplateItem>
            </SubMenu>
        </TemplateItem>
    <TopGroup> 
</eo:Menu>

Binding this menu to a hierarchical data source sets all first item's OnClickScript to "window.alert('first level'); " and all second level navigation item's OnClickScript to "window.alert('second level'); ".

Unlike look items, which only work with appearance related properties, template item works with almost all properties. You can specify the properties in the TemplateItem and they will be applied to the items created during data binding.

Using CustomItem with template item

You can also use CustomItem with template item. CustomItem enables a navigation item to nest any ASP.NET server control as its content. See Custom Item for more details.