Skip to main content
A newer version of this page is available. .
Tab

MenuItem.Template Property

Gets or sets a template used to display the content of the current menu item.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v19.1.dll

Declaration

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

Property Value

Type Default Description
ITemplate *null*

An object supporting the System.Web.UI.ITemplate interface which contains the template used to display the menu item’s content.

Remarks

Use the Template property to control the contents of the current menu item. The template defined using this property replaces the content of an individual menu item - in particular, the specified image and text of the item.

Note that any style settings defined for the menu item via specific properties (such as the ASPxMenuBase.ItemStyle or ASPxMenuBase.SubMenuItemStyle, etc) are still in effect for the menu item whose content is specified through using the Template property.

In order to define a common content for all menu items within a menu control, the menu’s ASPxMenuBase.ItemTemplate property can be used. A template for the client regions of submenus can be specified via the ASPxMenuBase.SubMenuTemplate or MenuItem.SubMenuTemplate properties.

Note

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

Note

A Template cannot contain another menu control.

Example

This part of the Templates demo illustrates how to use template technology within the ASPxMenu control.

A specific MenuItem.SubMenuTemplate property is used to define the template for the first root menu item’s submenu. The content of a SubMenuTemplate type is represented by the ASPxSiteMapControl, which displays a hierarchical structure of links (site map nodes) that reference different web pages within the site.

The appearance of the second root menu item’s sub-item is defined via the MenuItem.Template property of each sub-item.

<dxm:ASPxMenu BorderBetweenItemAndSubMenu="HideRootOnly" EnableViewState="False" 
EnableClientSideAPI="true" ID="ASPxMenu1" AutoSeparators="None" runat="server" 
ShowSubMenuShadow="true" ItemImagePosition="Right" GutterWidth="0px" 
ShowPopOutImages="True">
    <Items>
        <dxm:MenuItem Text="SubMenu Template" Name="submenu">
        <Items>
            <dxm:MenuItem />
        </Items>             
        <SubMenuTemplate>
            <dxsm:ASPxSiteMapControl EnableViewState="False" ID="ASPxSiteMapControl1" 
            runat="server" DataSourceID="ASPxSiteMapDataSource1">
              ...
            </dxsm:ASPxSiteMapControl>         
       </SubMenuTemplate>
        </dxm:MenuItem>
        <dxm:MenuItem Text="Item Template" Name="item">                                            
            <SubMenuStyle Paddings-Padding="8px" Font-Size="10px" Font-Names="Verdana" 
            Wrap="False" ForeColor="#000000" />
            <Items>
             ...
                <dxm:MenuItem Text="Email" Name="email" BeginGroup="true">
                    <Template>
                    <dxe:ASPxLabel ID="Label2" EnableViewState="false" 
                    AssociatedControlID="TextBox1" runat="server" 
                    Text="<%# Container.Item.Text %>" Font-Size="10px" 
                    ForeColor="#003399" Font-Bold="true" />
                    <table border="0" cellpadding="0" cellspacing="0" 
                    style="margin-top: 4px;" width="260px">
                        <tr>
                            <td style="width: 100%;"><dxe:ASPxTextBox ID="TextBox1" 
                             runat="server" EnableViewState="false" Width="100%" />
                            </td>
                            <td style="padding-left: 3px;"><dxe:ASPxButton ID="Button1" 
                            runat="server" EnableViewState="False" Text="Subscribe" 
                            AutoPostBack="False">
                            <ClientSideEvents Click="function(s, e) {
                             ASPxClientMenuBase.GetMenuCollection().HideAll(); return false;
                            }" />
                            </dxe:ASPxButton></td>
                        </tr>
                    </table>                                                
                    </Template>
                </dxm:MenuItem>
            </Items>
        </dxm:MenuItem>
    </Items> </dxm:ASPxMenu>
See Also