New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Server-side Templates

RadMenu fully supports templates. You can embed any content inside a RadMenu template:

  • HTML markup
  • ASP.NET server controls
  • Third-party controls (other Telerik controls as well)

You can define two types of RadMenu templates:

1. Global Templates - template that is automatically applied to all items: 

      <telerik:RadMenu ID="RadMenu1" runat="server">


             <ItemTemplate>


                   ... 


             </ItemTemplate>


   
      </telerik:RadMenu>

2. Per-item Template - template that overrides the global template on a item basis. 

     <telerik:RadMenu ID="RadMenu1" runat="server">


        <telerik:RadMenuItem Text="Node">


            <ItemTemplate>


                   ...


            <ItemTemplate>


        </telerik:RadMenuItem>


     </telerik:RadMenu>

3. ContentTemplate - template that overrides the global template on a item basis and serves as a container for the child items of an item. 

     <telerik:RadMenu ID="RadMenu1" runat="server">


        <telerik:RadMenuItem Text="Node">


            <ContentTemplate>


                   ...


            <ContentTemplate>


        </telerik:RadMenuItem>


     </telerik:RadMenu>


This example shows the usage of per-item templates - ContentTemplate and ItemTemplate.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="Menu_Examples_Functionality_Templates_DefaultVB" %>


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container">
        <telerik:RadMenu RenderMode="Lightweight" runat="server" ID="RadMenu1" Skin="Glow">
            <DefaultGroupSettings Height="270px" />
            <Items>
                <telerik:RadMenuItem Text="Asia">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap1" Skin="Glow" CssClass="itemContent asia">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="Afghanistan"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Bangladesh"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Cambodia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="China"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="India"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Indonesia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Iran"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Iraq"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Japan"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Maldives"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Philippines"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Saudi Arabia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Thailand"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Yemen"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="United Arab Emirates"></telerik:RadSiteMapNode>

                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Africa">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap2" Skin="Glow" CssClass="itemContent africa">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="Algeria "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Angola "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Cameroon "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Ethiopia "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Gabon "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Guinea "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Kenya "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Madagascar "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Morocco "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Mozambique "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Tanzania "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Togo "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Uganda "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Zambia "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Zimbabwe"></telerik:RadSiteMapNode>

                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="North America">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap3" Skin="Glow" CssClass="itemContent northAmerica">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="Barbados "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Belize "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Canada"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Costa Rica"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Cuba"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Grenada "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Guatemala "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Haiti "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Honduras "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Mexico"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Nicaragua "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Panama "></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Saint Lucia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="The Bahamas"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="United States"></telerik:RadSiteMapNode>
                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="South America">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap4" Skin="Glow" CssClass="itemContent southAmerica">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="Argentina"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Bolivia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Brazil"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Chile"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Colombia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Ecuador"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Guyana"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Paraguay"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Peru"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Suriname"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Uruguay"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Trinidad and Tobago"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Venezuela"></telerik:RadSiteMapNode>
                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Europe">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap5" Skin="Glow" CssClass="itemContent europe">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="Austria"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Belgium"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Bulgaria"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Denmark"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="England"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="France"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Germany"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Greece"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Hungary"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Italy"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Netherlands"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Romania"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Russia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Spain"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Sweden"></telerik:RadSiteMapNode>

                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
                <telerik:RadMenuItem Text="Australia">
                    <ContentTemplate>
                        <telerik:RadSiteMap runat="server" ID="RadSiteMap6" Skin="Glow" CssClass="itemContent australia" Height="170">
                            <DefaultLevelSettings ListLayout-RepeatColumns="3"></DefaultLevelSettings>
                            <Nodes>
                                <telerik:RadSiteMapNode Text="New South Wales"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Queensland"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="South Australia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Tasmania"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Victoria"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Western Australia"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Northern Territory"></telerik:RadSiteMapNode>
                                <telerik:RadSiteMapNode Text="Australian Capital Territory"></telerik:RadSiteMapNode>
                            </Nodes>
                        </telerik:RadSiteMap>
                    </ContentTemplate>
                </telerik:RadMenuItem>
            </Items>
        </telerik:RadMenu>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance