ASPxNavBar.ItemTemplate Property

Gets or sets a common template used for displaying the content of all items within the navbar control.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v24.2.dll

Declaration

C#

[DefaultValue(null)]
public virtual ITemplate ItemTemplate { get; set; }

VB.NET

<DefaultValue(Nothing)>
Public Overridable Property ItemTemplate As ITemplate

Property Value

Type	Default	Description
ITemplate	null	An object supporting the System.Web.UI.ITemplate interface which contains the template used for displaying the content of all items within the navbar.

Remarks

Use the ItemTemplate property to define a common content for all items within the current navbar control. The template created using this property replaces the content of each item within the navbar - in particular, the item’s image and text specified.

Note that any style settings defined for the items via the specific properties (such as the ASPxNavBar.ItemStyle or NavBarGroup.ItemStyle) are still in effect for the items whose contents are specified through using the ItemTemplate property.

The content of items within a particular group can be defined using the group’s NavBarGroup.ItemTemplate property.

Note

Once a template defined via the ItemTemplate property is created within a control, it is instantiated within a container object of the NavBarItemTemplateContainer type. This container object exposes a set of specific properties to which the template’s child controls can be bound.

Example

This example demonstrates how to bind the ASPxNavBar control to the XmlDataSource. This example also shows how to work with GroupHeaderTemplate and ItemTemplate templates.

Default.aspx (C#)

<dx:ASPxNavBar ID="nbNavBar" runat="server" DataSourceID="XmlDataSource1" Width="250px">
    <GroupHeaderTemplate>
        <strong style="color: #F82F61;">
            <%# !string.IsNullOrEmpty(Container.Group.Name) ? Container.Group.Name : Container.Group.Text %>
        </strong>
    </GroupHeaderTemplate>
    <ItemTemplate>
        <div style="border: 1px dashed #F82F61; padding: 2px 8px; cursor: pointer;" onclick="window.location = '<%# Container.Item.NavigateUrl %>';">
            <a href="<%# Container.Item.NavigateUrl %>">
                <%# Container.Item.Text %>
            </a>
        </div>
    </ItemTemplate>
</dx:ASPxNavBar>

<%-- Data Source --%>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/NavBarCameras.xml" XPath="Cameras/*" />

NavBarCameras.xml

<?xml version="1.0" encoding="utf-8"?>
<Cameras>
  <Brand Text="Olympus">
    <Camera NavigateUrl="javascript:void(21);" Text="Olympus E-400 (10.0 million pixels)" />
    <Camera NavigateUrl="javascript:void(22);" Text="Olympus E-330 (7.4 million pixels)" />
    <Camera NavigateUrl="javascript:void(23);" Text="Olympus E-500 (8.0 million pixels)" />
    <Camera NavigateUrl="javascript:void(24);" Text="Olympus E-300 (8.0 million pixels)" />
  </Brand>  
  <Brand Text="Pentax">
    <Camera NavigateUrl="javascript:void(41);" Text="Pentax K10D (10.0 million pixels)" />
    <Camera NavigateUrl="javascript:void(42);" Text="Pentax K100D (6.1 million pixels)" />
    <Camera NavigateUrl="javascript:void(43);" Text="Pentax *ist DL2 (6.1 million pixels)" />
  </Brand>
</Cameras>