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 defining CustomItem inside a TemplateItem. When items are populated, the content of TemplateItem will be copied to each item. You can also bind data source to CustomItem's properties by using ASP.NET data binding expression.

As shown above, data is bound to the "Text" property of the CheckBox, which is the content of the CustomItem.

Since CustomItem is a container control, it can contain not only ASP.NET server controls, but also regular HTML. You can use data binding expression to bind any data to embeded control's properties.

Declare CustomItem in a TemplateItem tag

Most commonly, an embedded custom item is declared within <TemplateItem> tag, which defines the template for navigation item populated during data binding:

<eo:Menu Runat="server" id="menu1">
    <TopGroup>
        <TemplateItem>
            <CustomItem>
                <asp:Button Runat="server" Text="OK"></asp:Button>
            </CustomItem>
        </TemplateItem>
    </TopGroup>
</eo:Menu>

The custom item declared within TemplateItem will be repeatedly created for each navigation item when the control or navigation item group is bound to a data source. You can:

• Have different custom items for different levels;
• Define data binding expression to bind data to the controls in custom item in the tag;
• Handle CustomItemCreated event in code behind;

Bind data to CustomItem's property

When using data binding expressions, Container.DataItem refers to the current data item during data binding. The current data item is the data item used to populate the navigation item. Container.DataItem can be:

Here is an example of using the data binding expression when data source is IEnumerable and the element type is string:

<TopGroup>
    <TemplateItem>
    <CustomItem>
        <asp:CheckBox CssClass="normal" Runat="server" 
            Text='<%#Container.DataItem%>'> </asp:CheckBox>
    </CustomItem>
    </TemplateItem>
</TopGroup>

Here is an example of using the data binding expression when data source is DataTable:

<!-- We use DataRowView in the data binding expression so we need to put the 
following lines on top of the aspx page. -->
<%@ Import namespace="System.Data" %>
<eo:Menu Runat="server" id="menu1">
    <TopGroup>
        <TemplateItem>
            <CustomItem>
                <asp:Button Runat="server" 
                    Text='<%#((DataRowView)Container.DataItem)["Country"]%>'></asp:Button>
            </CustomItem>
            <SubMenu>
                <TemplateItem>
                    <CustomItem>
                        <asp:Button Runat="server" Text="Level 2"></asp:Button>
                    </CustomItem>
                </TemplateItem>
            </SubMenu>
        </TemplateItem>
    </TopGroup>
</eo:Menu>

Here is an example of using the data binding expression when data source is IDataReader:

<!-- We use DataRowView in the data binding expression so we need to put the 
following line on top of the aspx page. -->
<%@ Import namespace="System.Data" %>
<eo:Menu Runat="server" id="menu1">
    <TopGroup>
        <TemplateItem>
            <CustomItem>
                <asp:Button Runat="server" 
                    Text='<%#((IDataRecord)Container.DataItem)["Country"]%>'></asp:Button>
            </CustomItem>
            <SubMenu>
                <TemplateItem>
                    <CustomItem>
                        <asp:Button Runat="server" Text="Level 2"></asp:Button>
                    </CustomItem>
                </TemplateItem>
            </SubMenu>
        </TemplateItem>
    </TopGroup>
</eo:Menu>

You can also use CustomItemCreated event to modify the item before rendering.